更干净/更简单的jquery编写方式"if"代码

Cleaner/simpler way of writing this jquery "if" code?

本文关键字：quot 方式 代码 if 更简单 jquery      更新时间：2023-09-26

我写了这个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 demo.

通过在.not()方法中添加+ ':first'来修改上述演示，以防止添加相同类的重复框，正如@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.

只有当.small、.medium和.largediv是#box的only内容时，才可以使用empty()。如果它们是，清空#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.

引用:

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

你可以这样做:

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

可能不是最好的方式，但它将其切割为2行。我可以想象，如果我对整个代码有更好的理解，您可能会以更好的方式完成这个任务。似乎这可能被调用多次，每次添加和删除div并不是最优的。

至少，您应该使用if/else而不是单独的if或开关
相关文章：