如何縮短這個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代碼

回答

相關問題