javascript - 切换类(class)名称

Question

我有一个元素列表:

<ul id='list'>
    <li id='1-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('1-i');">Toggle #1</a></li>
    <li id='2-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('2-i');">Toggle #2</a></li>
    <li id='3-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('3-i');">Toggle #3</a></li>
    <li id='4-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('4-i');">Toggle #4</a></li>
</ul>

1. 如果您单击其中一个元素(即“切换 #1”)，我希望所有其他元素的类名从可见更改为不可见。

2. 如果您现在单击另一个元素，我希望该元素的类名更改为可见(对所有其他类名没有影响，它们应该保持原样)

简单示例:您首先单击“Toggle #4”，然后单击“Toggle #1”。结果应该是:

<ul id='list'>
    <li id='1-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('1-i');">Toggle #1</a></li>
    <li id='2-i' class='invisible'><a href='javascript:return false;' onclick="toggle_class('2-i');">Toggle #2</a></li>
    <li id='3-i' class='invisible'><a href='javascript:return false;' onclick="toggle_class('3-i');">Toggle #3</a></li>
    <li id='4-i' class='visible'><a href='javascript:return false;' onclick="toggle_class('4-i');">Toggle #4</a></li>
</ul>

我尝试编写一个 js 函数，但行为与我预期的不同:

        var firstrun = true;

        function toggle_class(id) {
            var thisElem = document.getElementById(id);
            var invisible = "invisible";
            var visible = "visible";
            if (thisElem.className == 'invisible' && !firstrun) {
                thisElem.className = thisElem.className.replace(invisible, visible);
            } else {
                thisElem.className = thisElem.className.replace(visible, invisible);
            }
            if (firstrun) {
                var children = document.getElementsByClassName('visible');
                for (var i = 0; i < children.length; i++) {
                    if (children[i].id != id) {
                        children[i].className = thisElem.className.replace(visible, invisible);
                    }
                }
            }
            firstrun = false;
        }

第一次单击时，所选元素将其类更改为不可见，列表中的每两个元素也是如此。我不明白为什么会这样。我需要更改代码中的哪些内容才能使其正常工作？

Answer 1

问题是，在您第一次运行时，您收集了页面上所有具有可见类的元素并将其更改为不可见，包括您的第一个元素

 if (thisElem.className == 'invisible') {
    thisElem.className = thisElem.className.replace(invisible, visible);
 } else if(!firstrun) {
    thisElem.className = thisElem.className.replace(visible, invisible);
 }

可能会更好，因为您需要确保该元素不会更改为不可见。但这将使第二个 if block 继续运行。这样做可能是谨慎的做法

if(!firstrun){
    if (thisElem.className == 'invisible') {
        thisElem.className = thisElem.className.replace(invisible, visible);
    } else {
       thisElem.className = thisElem.className.replace(visible, invisible);
    }
}
else{
    var children = document.getElementsByClassName('visible');
    for (var i = 0; i < children.length; i++) {
       if (children[i].id != id) {
          children[i].className = thisElem.className.replace(visible, invisible);
       }
    }
}

我有点想知道为什么您要为字符串使用变量，例如 var invisible = "invisible"，因为它只使用一次，而且就像键入字符串本身一样冗长冗长。如果您要设置一个变量，不妨多次使用它。也不需要使用替换，除非可能会添加更多的类，但这只是 imo。它不应该影响代码