So verkürzen Sie diesen JQuery Code

Question

Ich bin neu in javascript/jQuery. Gibt es eine Möglichkeit, diesen Code kürzer zu machen?

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

Sie können combine the selectors und wenden Sie jede Methode mit Verkettung.

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

---

Oder attribute starts with the selector verwenden.

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

---

Oder eine gemeinsame Klasse für Elemente verwenden und auf das Wählen basiert.

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

Answer 2

wenn könnten Sie alle Ihre Boxen eine Klasse wie geben .box Sie diese (bevorzugt) tun könnte

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

oder Sie können diese

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

anstelle von tun:

$('#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

Sie können Folgendes tun :

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

oder können Sie Attribut wie

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

Alle diese Elemente Daten-box = "true" -Attribut haben sollte.

Auch könnten Sie einige Dummy-Klasse mit Ihren slectors verwenden und wie folgt vorgehen:

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

Answer 4

dies ist die Art und Weise Ihre Links zu verkürzen. weil Sie

.removeClass ("col-md-Offset-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(); 
    } 

ODER

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