Блог

Я написал это выражение if, и оно отлично работает, но мне просто интересно, есть ли более простой способ сделать это

 if(id == 'small'){
    $('#box').append('<div class="small">'   foo   '</div>');
    $('.medium,.large').remove();
}
if(id == 'medium'){
    $('#box').append('<div class="medium">'   foo   '</div>');
    $('.small,.large').remove();
}
if(id == 'large'){
    $('#box').append('<div class="large">'   foo   '</div>');
    $('.small,.medium').remove();
}
  

Я бы предложил что-то вроде:

 if (id == 'small' || id == 'medium' || id == 'large') {

    $('#box').append('<div class="' id '">'   foo   '</div>');
    $('.small, .medium, .large').not('.'   id).remove();

}
  

Хотя я подозреваю, что его можно улучшить, и это, пока, непроверено.

Пересмотренный пример:

 $('ul li').click(

function() {
    var ID = this.id;

    if (ID == 'small' || ID == 'medium' || ID == 'large') {

        $('<div />').addClass(ID).appendTo('#box');
        $('#box .small, #box .medium, #box .large')
            .not('.'   ID   ':first')
            .remove();

    }
});
  

Демонстрация JS Fiddle.

Приведенная выше демонстрация была пересмотрена путем добавления ':first' в .not() метод, чтобы предотвратить добавление повторяющихся блоков одного и того же класса, как указано в качестве проблемы в комментариях от @Dizzi:

Это работает, но если вы нажмете еще один раз, вы получите дополнительные поля.

Отредактировано, чтобы немного доработать:

 $('ul li').click(

function() {
    var ID = this.id;
    var foo = "some content, from somewhere.";

    if (ID == 'small' || ID == 'medium' || ID == 'large') {

        $('#box')
            .empty();

        $('<div />')
            .addClass(ID)
            .text(foo)
            .appendTo('#box');

    }
});
  

Демонстрация JS Fiddle.

Использование empty() работает, только если .small , .medium и .large div являются единственным содержимым #box . Если это так, то немного быстрее очистить #box и затем вставить в него, вместо того, чтобы сначала вставлять, а затем использовать селектор для удаления остального содержимого.

Однако, если есть другое содержимое, то селектор (вероятно) все равно придется использовать вместо empty() .

Отредактировано, чтобы включить предложение от @Raynos (в комментариях):

if (ID in {small:0, medium:0, large:0}) работает так же хорошо, но менее читабелен. Однако в нем меньше символов!

 $('ul li').click(

function() {
    var ID = this.id;
    var foo = "some content, from somewhere.";

    if (ID in {small:0, medium:0, large:0}) {

        $('#box')
            .empty();

        $('<div />')
            .addClass(ID)
            .text(foo)
            .appendTo('#box');

    }
});
  

Демонстрация JS Fiddle.

Ссылки:

• empty() .
• addClass() .
• text() .

Вероятно, вы могли бы сделать что-то вроде:

 $('#box').append('<div class="' id '">'   foo   '</div>');
$('.small,.medium,.large').not('.' id).remove();
  

возможно, не лучший способ, но он сокращает его до 2 строк. Я бы предположил, что, если бы я лучше понимал общий код, вы, вероятно, могли бы сделать это лучшим способом. Похоже, что это, вероятно, вызывается несколько раз, добавление и удаление divs каждый раз не является оптимальным.

По крайней мере, вы должны использовать if / else вместо отдельных ifs или переключателя