このJQueryコードの短縮方法

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

かあなたはこれらすべての要素がデータ・ボックス= "true" 属性を持っている必要があり

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

のような属性を使用することができます。

また、あなたはあなたのslectorsでいくつかのダミークラスを使用して、次を行うことができ：

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

Answer 4

これはあなたのリンクを短くする方法です。あなたは

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

OR

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