如何缩短这个jQuery代码

我是新来的JavaScript/jQuery的。有没有办法缩短这段代码？如何缩短这个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(); 
}

来源

2017-03-09 LeEclipse

哪里码？ –

@MuhammadQasim pastebin链接。 – LeEclipse

请在您的问题中添加您的完整代码。您可以添加一个链接作为参考。 –

你可以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(); 
}

来源

2017-03-09 10:40:08

时，你可以给所有的箱子像.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();

来源

2017-03-09 10:41:38

你可以做以下：

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(); 
}

所有这些因素应该有数据盒= “true” 属性。

此外，您可以使用您的slectors一些虚拟类，并做到以下几点：

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

来源

2017-03-09 10:42:14

这是为了缩短您的联系方式。因为你已经

.removeClass（ “COL-MD-偏移-4”）

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(); 
    }

来源

2017-03-09 10:48:24 Fiido93

如何缩短这个jQuery代码

回答

相关问题