javascript - 打开和关闭列表元素的类 - CSS 和仅 Javascript

Question

对于这个特殊的挑战，我需要为所有 <li> 切换已创建的类(class)的成员资格 两个给定列表中的元素(同时)。如果 <li>任一列表中的元素当前未分配该类，但已分配该类；如果<li>任一列表中的 元素当前已分配该类，该类将被删除。每次单击按钮时，都会添加和删除该类(例如，第一次单击时，可以添加该类 - 然后第二次单击时，可以删除该类，等等)。

我被要求专门用普通 JavaScript 来完成这个特定的任务。虽然我知道 jQuery 会是更简单的选择，但我被要求仅使用普通的 JavaScript 来完成此任务。

当我按下按钮时，CSS 类将按预期应用(此处，字体系列、字体大小和字体拉伸(stretch)属性将被更改)；但是，当我第二次单击该按钮时，没有任何变化(例如，类被删除)，一切都恢复正常。

如果有人可以指出我调整当前代码的非 jQuery 方法，请告诉我。

感谢您的帮助:)。

以下是此任务的相关 HTML、CSS 和 JavaScript:

HTML:

<ul id="newZealandList">
    <li>Auckland</li>
    <li>Wellington</li>
    <li>Christchurch</li>
    <li>Tauranga</li>
    <li>Dunedin</li>
</ul>

<ul id="usaList">
    <li>Los Angeles</li>
    <li>San Francisco</li>
    <li>San Diego</li>
    <li>Denver</li>
    <li>Boulder</li>
</ul>

<button id="modifyListsToggle">Change Lists - Toggle</button>

CSS:

.modifyListElements{
    font-family:"Comic Sans MS", cursive;
    font-size:24px;
    font-stretch:extra-expanded;
}

JavaScript

var newZealandListItems =  document.getElementById("newZealandList").getElementsByTagName("li");
var usaListItems = document.getElementById("usaList").getElementsByTagName("li");

function addClass(obj)
{
    obj.className="modifyListElements";
}

function removeClass(obj)
{
    obj.className = "";
}


function toggleClass()
{
    for (var i = 0; i < newZealandListItems.length; i++) {
        if(i.className != "modifyListElements") {
            //newZealandListItems[i].className = "modifyListElements";
            addClass(newZealandListItems[i]);

        }
        else
        {
            //newZealandListItems[i].className = "";
            removeClass(newZealandListItems[i]);
        }
    }

    for (var i = 0; i < usaListItems.length; i++) {
        if(i.className != "modifyListElements") {
            //usaListItems[i].className = "modifyListElements";
            addClass(usaListItems[i]);
        }
        else
        {
            //usaListItems[i].className = "";
            removeClass(usaListItems[i]);
        }
    }
}

var modifyListsToggle = document.getElementById("modifyListsToggle");
modifyListsToggle.onclick = toggleClass;

Answer 1

问题在这里

for (var i = 0; i < newZealandListItems.length; i++) {
        if(i.className != "modifyListElements") {
//con....

这里

 for (var i = 0; i < usaListItems.length; i++) {
        if(i.className != "modifyListElements") {
//con....

i 只是循环计数器变量，您需要使用它来访问该索引处的元素，因此应该是

    for (var i = 0; i < newZealandListItems.length; i++) {
            if (newZealandListItems[i].className != "modifyListElements") {

//con..

和

for (var i = 0; i < usaListItems.length; i++) {
    if (usaListItems[i].className != "modifyListElements") {

//con..

另一方面，如果使用多个类，此代码可能会出现问题，因为 .className 属性将返回元素上的所有类。如果这可能是将来的问题，我会继续使用 className.replace('modifyListElements','') 进行删除(这样它只会删除该类，而不会删除其他类)。如果存在多个类，则对 className 上的一个类进行测试也将不起作用。在这种情况下，先进行测试，然后进行 .replace 可能是解决方案。