jQuery 编写用于添加和删除 css 类的 if 参数的最短方法

Question

编写以下代码的最短方法是什么？

在你看代码之前，让我突破一下。我有 11 个带有 id 的div，例如myManyDiv0、myManyDiv1...myManyDiv10.我还有 2 个带有 iddivSome和divMany的div。

如果whatever0，myManyDiv0将具有类visible，所有其他myMany..div将删除该类visible。同样，如果whatever是1，myManyDiv1将具有类visible，所有其他myMany..div将删除类visible...你明白了。

但是对于我的其他 2 个divdivSome和divMamy，它们有很大的不同。

• 如果whatever是0或1，divSome会将类displayNone添加到其中，并且对于divMany，displayNone从中删除。
• 如果whatever是2的，divSome将从中移除displayNone类，并且divMany，displayNone添加到其中。

我想，我不擅长解释它，但我希望你明白这个想法。提前感谢您的教训。

if (whatever == "0") {
$('#myManyDiv0').addClass('visible'); // visible div
$('#myManyDiv1').removeClass('visible');
$('#myManyDiv2').removeClass('visible');
$('#myManyDiv3').removeClass('visible');
$('#myManyDiv4').removeClass('visible');
$('#myManyDiv5').removeClass('visible');
$('#myManyDiv6').removeClass('visible');
$('#myManyDiv7').removeClass('visible');
$('#myManyDiv8').removeClass('visible');
$('#myManyDiv9').removeClass('visible');
$('#myManyDiv10').removeClass('visible');
$('#divSome').addClass('displayNone');
$('#divMany').removeClass('displayNone'); //visible div
} else if (whatever == "1") {
$('#myManyDiv0').removeClass('visible');
$('#myManyDiv1').addClass('visible'); //visible div
$('#myManyDiv2').removeClass('visible');
$('#myManyDiv3').removeClass('visible');
$('#myManyDiv4').removeClass('visible');
$('#myManyDiv5').removeClass('visible');
$('#myManyDiv6').removeClass('visible');
$('#myManyDiv7').removeClass('visible');
$('#myManyDiv8').removeClass('visible');
$('#myManyDiv9').removeClass('visible');
$('#myManyDiv10').removeClass('visible');
$('#divSome').addClass('displayNone');
$('#divMany').removeClass('displayNone'); //visible div
} else if (whatever == "2") {
$('#myManyDiv0').removeClass('visible');
$('#myManyDiv1').removeClass('visible');
$('#myManyDiv2').addClass('visible'); //visible div
$('#myManyDiv3').removeClass('visible');
$('#myManyDiv4').removeClass('visible');
$('#myManyDiv5').removeClass('visible');
$('#myManyDiv6').removeClass('visible');
$('#myManyDiv7').removeClass('visible');
$('#myManyDiv8').removeClass('visible');
$('#myManyDiv9').removeClass('visible');
$('#myManyDiv10').removeClass('visible');
$('#divSome').removeClass('displayNone'); //visible div
$('#divMany').addClass('displayNone');
}

Answer 1

首先，为了避免重复所有这些"myManyDiv"，你可以遍历它们。您可以选择所有以 myManyDiv 开头的div，如下所示：

$('[id^=myManyDiv]')

(来源：循环遍历以 XXX 开头的所有 ID(

然后你可以得到id末尾的数字，如下所示：

var idNum = $(this).attr('id').replace(/myManyDiv/, '');

(来源：jQuery Get Number from id(

所以你最终得到(假设已经设置了什么(：

$('[id^=myManyDiv]').each(function() {
var idNum = $(this).attr('id').replace(/myManyDiv/, '');
if (whatever === parseInt(idNum)) $(this).addClass('visible');
else $(this).removeClass('visible');
})

对于其他两个div，您可以分别担心它们：

if (whatever < 2) {
$('#divSome').addClass('displayNone');
$('#divMany').removeClass('displayNone');
}
else {
$('#divSome').removeClass('displayNone');
$('#divMany').addClass('displayNone');
}

Answer 2

一种方法是使用function加forloop以便从所有div中删除visible类，如下所示：

function rem_all()
{
var id ="#myManyDiv";
for (var i=0;i<11;i++) $(id+i).removeClass('visible');
$('#divMany').addClass('displayNone');
$('#divSome').addClass('displayNone');
}

然后，您可以像下面这样更改代码：

rem_all();    
if (whatever == "0") {
$('#myManyDiv0').addClass('visible');
$('#divMany').removeClass('displayNone');
} else if (whatever == "1") {
$('#myManyDiv1').addClass('visible');
$('#divMany').removeClass('displayNone'); //visible div
} else if (whatever == "2") {
$('#myManyDiv2').addClass('visible'); //visible div
$('#divSome').removeClass('displayNone'); //visible div
}

编辑：

或最后一部分的更好方法：

rem_all();
$('#myManyDiv'+whatever).addClass('visible');
if (parseInt(whatever) <2)  $('#divMany').removeClass('displayNone');
else $('#divSome').removeClass('displayNone');