Question

我是javascript / jQuery的新手。有没有办法缩短这段代码？

else if (players == 6) {
    $('#box1').addClass("col-md-4");
    $('#box1').removeClass("col-md-6");
    $('#box2').addClass("col-md-4");
    $('#box2').removeClass("col-md-6");
    $('#box3').addClass("col-md-4");
    $('#box3').removeClass("col-md-6");
    $('#box4').addClass("col-md-4");
    $('#box4').removeClass("col-md-6");
    $('#box4').removeClass("col-md-offset-4");
    $('#box5').addClass("col-md-4");
    $('#box5').removeClass("col-md-6");
    $('#box6').addClass("col-md-4");
    $('#box6').removeClass("col-md-6");
    $('#box1').show();
    $('#box2').show();
    $('#box3').show();
    $('#box4').show();
    $('#box5').show();
    $('#box6').show();
}

Answer 1

您可以combine the selectors并使用链接应用每种方法。

else if (players == 6) {
   $('#box1,#box2,#box3,#box4,#box5,#box6')
        .addClass("col-md-4")
        .removeClass("col-md-6")
        .show();
}

或使用attribute starts with the selector。

else if (players == 6) {
   $('[id^="box"]')
        .addClass("col-md-4")
        .removeClass("col-md-6")
        .show();
}

<小时/> 或者使用元素的公共类，并根据它进行选择。

else if (players == 6) {
   $('.box')
        .addClass("col-md-4")
        .removeClass("col-md-6")
        .show();
}

Answer 2

当你可以给你所有的盒子像.box这样的课时你可以这样做（首选）

$('.box').addClass("col-md-4").removeClass("col-md-6").show();

或者你可以这样做

$('#box1, #box2, #box3').addClass("col-md-4").removeClass("col-md-6").show();

代替：

$('#box1').addClass("col-md-4");
$('#box1').removeClass("col-md-6");
$('#box2').addClass("col-md-4");
$('#box2').removeClass("col-md-6");
$('#box3').addClass("col-md-4");
$('#box3').removeClass("col-md-6");
$('#box4').addClass("col-md-4");
$('#box4').removeClass("col-md-6");
$('#box4').removeClass("col-md-offset-4");
$('#box5').addClass("col-md-4");
$('#box5').removeClass("col-md-6");
$('#box6').addClass("col-md-4");
$('#box6').removeClass("col-md-6");
$('#box1').show();
$('#box2').show();
$('#box3').show();
$('#box4').show();
$('#box5').show();
$('#box6').show();

Answer 3

您可以执行以下操作：

else if (players == 6) {
   $('[id^="box"]').removeClass("col-md-6").addClass("col-md-4").show();
}

或者你可以使用像

这样的属性

else if (players == 6) {
   $('[data-box="true"]').removeClass("col-md-6").addClass("col-md-4").show();
}

所有这些元素都应该有data-box =“true”属性。

此外，您可以在选择器中使用一些虚拟课程并执行以下操作：

else if (players == 6) {
   $('.dummy').removeClass("col-md-6").addClass("col-md-4").show();
}

Answer 4

这是缩短链接的方法。因为你有

<强> .removeClass（＆＃34; COL-MD-偏移-4＆＃34）

if (players === 6) {
     $('#box1').addClass("col-md-4").removeClass("col-md-6").show();
     $('#box2').addClass("col-md-4").removeClass("col-md-6").show();
     $('#box3').addClass("col-md-4").removeClass("col-md-6").show();
     $('#box4').addClass("col-md-4").removeClass("col-md-6 col-md-offset-4").show();
     $('#box5').addClass("col-md-4").removeClass("col-md-6").show();
     $('#box6').addClass("col-md-4").removeClass("col-md-6").show();
    }

或

if (players === 6) { $('#box1,#box2,#box3,#box5,#box6').addClass("col-md-4").removeClass("col-md-6").show(); $('#box4').addClass("col-md-4")removeClass("col-md-6 col-md-offset-4").show(); }

如何缩短这个JQuery代码

4 个答案: