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

Question

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

在你看代码之前，让我先解释一下。我有 11 div ID 例如 myManyDiv0 , myManyDiv1 ... myManyDiv10 。我也有2 div id divSome和divMany 。

如果whatever是 0 , myManyDiv0将有类(class)visible和所有其他myMany.. div 将具有类 visible已删除。同样的方式，如果whatever是 1 , myManyDiv1将有类(class)visible和所有其他myMany.. div 将具有类 visible删除...你明白了。

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

• 如果whatever是 0或1 , divSome将有类(class)displayNone添加到其中并为 divMany , displayNone从中删除。
• 如果whatever是 2 , divSome将有类(class)displayNone从中删除并为 divMany , displayNone添加到其中。

我想，我不太擅长解释它，但我希望你能明白。预先感谢您的类(class)。

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]')

(来源:Loop through all IDs that begin with XXX)

然后你可以得到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');
}