Javascript 切换类名

我有一个项目清单：

<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”），我希望所有其他项目的类名从可见更改为不可见

如果现在单击另一个项目，我希望此项目的类名更改为可见（对所有其他类名没有影响，它们应保持原样）

简单示例：首先单击“切换4”，然后单击“切换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;
        }

var firstrun=true；
函数切换_类（id）{
var thisElem=document.getElementById（id）；
var invisible=“invisible”；
var visible=“visible”；
if（thiselm.className==‘不可见’和&！firstrun）{
thiselm.className=thiselm.className.replace（不可见，可见）；
}否则{
thisElem.className=thisElem.className.replace（可见、不可见）；
}
如果（首次运行）{
var children=document.getElementsByClassName（'visible'）；
对于（变量i=0；i

---

第一次单击时，选定项将其类更改为不可见，列表中的每一项也将更改为不可见。我不明白为什么会这样。我需要在代码中更改什么才能使其正常工作？

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

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

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

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

if（！firstrun）{
if（thiselm.className==‘不可见’）{
thiselm.className=thiselm.className.replace（不可见，可见）；
}否则{
thisElem.className=thisElem.className.replace（可见、不可见）；
}
}
否则{
var children=document.getElementsByClassName（'visible'）；
对于（变量i=0；i

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

我认为这可能会起作用（jquery）：

...

$（'#list>li'）。在（'单击'，函数（）上）{
$（'.first run>li'）.toggleClass（'visible-invisible'）；
$（'.first-run'）.removeClass（'first-run'）；
$（this.toggleClass（'visible-invisible'）；
返回false；
});

---

以下是我所做的-我为所有项目添加了一个切换类。 单击切换时，它会将不可见类添加到除单击的项之外的所有项中。需要jQuery

HTML

经过测试并运行，不知道为什么会被否决

EDIT添加了一种通过切换再次显示列表的方法。还有一个。

使用您的代码作为基础（我只让它真正工作，没有优化）：

var firstrun=true；
函数切换_类（id）{
var thisElem=document.getElementById（id）；
var invisible=“invisible”；
var visible=“visible”；
if（thiselm.className==‘不可见’和&！firstrun）{
thiselm.className=thiselm.className.replace（不可见，可见）；
thisElem.childNodes[2]。innerHTML=thisElem.className；//为增加额外可见性而添加
}else if（thisElem.className=='visible'&&&！firstrun）{
thisElem.className=thisElem.className.replace（可见、不可见）；
thisElem.childNodes[2]。innerHTML=thisElem.className；//为增加额外可见性而添加
}
如果（首次运行）{
var children=document.getElementById（'list'）.children；
对于（变量i=0；i

我修复并清理了下面的代码。它应该更简单，更容易理解

JavaScript:

var liElements = document.getElementById('list').children,
    notClickedYet = true;

// attach a click listener to each list element
Array.prototype.forEach.call(liElements, function (element) {
    element.addEventListener('click', function (e) {
        var li = e.target.parentNode;

        // run this the first time around
        if (notClickedYet) {
            notClickedYet = false;
            Array.prototype.forEach.call(liElements, function (ele) {
                ele.className = 'invisible';
            });
        }

        // run this every time
        li.className = li.className === 'invisible' ? 'visible' : 'invisible';
    });
});

<ul id='list'>
    <li id='1-i' class='visible'><a href='#'>Toggle #1</a></li>
    <li id='2-i' class='visible'><a href='#'>Toggle #2</a></li>
    <li id='3-i' class='visible'><a href='#'>Toggle #3</a></li>
    <li id='4-i' class='visible'><a href='#'>Toggle #4</a></li>
</ul>

HTML:

var liElements = document.getElementById('list').children,
    notClickedYet = true;

// attach a click listener to each list element
Array.prototype.forEach.call(liElements, function (element) {
    element.addEventListener('click', function (e) {
        var li = e.target.parentNode;

        // run this the first time around
        if (notClickedYet) {
            notClickedYet = false;
            Array.prototype.forEach.call(liElements, function (ele) {
                ele.className = 'invisible';
            });
        }

        // run this every time
        li.className = li.className === 'invisible' ? 'visible' : 'invisible';
    });
});

<ul id='list'>
    <li id='1-i' class='visible'><a href='#'>Toggle #1</a></li>
    <li id='2-i' class='visible'><a href='#'>Toggle #2</a></li>
    <li id='3-i' class='visible'><a href='#'>Toggle #3</a></li>
    <li id='4-i' class='visible'><a href='#'>Toggle #4</a></li>
</ul>

---

请参见此操作

为什么不改用jQuery？

$（文档）。打开（'单击'，'）。访问
<ul id='list'>
    <li id='1-i' class='visible'><a href='#'>Toggle #1</a></li>
    <li id='2-i' class='visible'><a href='#'>Toggle #2</a></li>
    <li id='3-i' class='visible'><a href='#'>Toggle #3</a></li>
    <li id='4-i' class='visible'><a href='#'>Toggle #4</a></li>
</ul>

<ul id='list'>
    <li id='1-i' class='visible'><a href='javascript:void(0);'>Toggle #1</a></li>
    <li id='2-i' class='visible'><a href='javascript:void(0);'>Toggle #2</a></li>
    <li id='3-i' class='visible'><a href='javascript:void(0);'>Toggle #3</a></li>
    <li id='4-i' class='visible'><a href='javascript:void(0);'>Toggle #4</a></li>
</ul>

$(document).on('click','.visible',function(){
   $(this).toggle(); 
});