Question

我写了这个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();
}

Answer 1

我建议像：

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 demo

通过在+ ':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 demo

仅当empty()，.small和.medium div是.large的仅内容时，#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 demo

参考文献：

Answer 2

您可以执行以下操作：

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

可能不是最好的方法，但它会将其减少到2行。我想，如果我对整体代码有了更好的理解，你可能会以更好的方式做到这一点。似乎这可能被多次调用，每次添加和删除div都不是最佳的。

至少，您应该使用if / else而不是单独的ifs或switch

编写这个jquery“if”代码的更清洁/更简单的方法？

2 个答案: