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

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

在你看代码之前，让我先把它破解一下。我有11个id为myManyDiv0、myManyDiv1的div。。。myManyDiv10。我还有2个div，id为divSome和divMany

如果值为0，则myManyDiv0将使该类和所有其他myMany可见。。div将删除可见的类。同样，如果值为1，则myManyDiv1将使该类和所有其他myMany可见。。div将删除可见的类。。。你明白了

但对于我的另外两个女主角divSome和divMamy，他们有点不同

如果是0或1，则divSome将向其添加displayNone类，而对于divMany，则从中删除displayNone类。 如果是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');
}

---

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

$('[id^=myManyDiv]')

归功于：

然后，您可以在id的末尾获得数字，如下所示：

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

归功于：

因此，您最终假设已经设置了：

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

---

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

$('[id^=myManyDiv]')

归功于：

然后，您可以在id的末尾获得数字，如下所示：

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

归功于：

因此，您最终假设已经设置了：

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

---

一种方法是使用function plus forloop从所有div中删除可见类，如下所示：

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

---

一种方法是使用function plus forloop从所有div中删除可见类，如下所示：

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

---

谢谢你的建议。第一部分真的很棒。谢谢你的课，谢谢你的建议。第一部分真的很棒。谢谢你的课。非常感谢你的损伤。非常感谢你的损伤。