更改所有li元素的类javascript/jquery按钮

我在一个网站上找到了手风琴风格的脚本。我对jquery/javascript很陌生，所以请耐心听我说

“我的基本”页面打开一个手风琴，第一个手风琴被锁定打开，其他手风琴在按下时打开/关闭。使我的顶部面板锁定打开的是一个

<li class="locked">. 

。

其他面板只有

 <li>

没有课。我想我可以打电话给他们

 <li class="somethingelse">

我希望在我的顶部面板上有一个按钮，可以更改所有

到

，以便用户可以查看整个站点。

我试过：

 <div>
 <ul>
  <li class="locked">Something
 <button onclick="myFunction()">Click me</button>
 </li>
 <li id="abcd" class="somethingelse">somethingelse</li>
 <li id="abcd"class="somethingelse">somethingelse</li>
 </ul>
 </div> 

 <script>
 function myFunction() {
 document.getElementById("abcd").class = "locked";
 }
 </script>

什么东西
点击我

somethingelse
somethingelse

函数myFunction（）{
document.getElementById（“abcd”）.class=“锁定”；
}

您应该如下更改元素类

document.getElementById("abcd").className = "locked";

如果要选择多个元素，请使用类名：

var nodes = document.getElementsByClassName("somethingelse");

因此，您的最终函数将如下所示：

函数myFunction（）{
var节点=document.getElementsByClassName（“somethingelse”）；
var arr=Array.prototype.slice.call（节点）；
arr.forEach（函数（节点）{
node.className=“已锁定”；
});
}

li{
颜色：#000000；
}
李，锁上了{
颜色：#ff0000；
}

什么东西
点击我

somethingelse
somethingelse

在纯JavaScript中，我建议：

function myFunction() {
    // retrieves a NodeList of all <li> elements that do not
    // have the 'locked' class-name:
    var liElements = document.querySelectorAll('li:not(.locked)');

    // uses Array.prototype.forEach to iterate over the array-like
    // NodeList:
    Array.prototype.forEach.call(liElements, function (li, index, list) {
        // first argument ('li' ): the current array-element,
        // second argument ('index'): unused, the index of the current
        // array-element in the array,
        // third argument ('list'): the array itself

        // adding the 'locked' class-name to the list of classes
        // of the current node:
        li.classList.add('locked');
    });
}

什么东西
点击我

somethingelse
somethingelse

函数myFunction（）{
var liElements=document.querySelectorAll（'li:not（.locked'）；
Array.prototype.forEach.call（元素、函数（li、索引、列表）{
li.classList.add（'locked'）；
});
}

function myFunction() {
    // retrieves a NodeList of all <li> elements that do not
    // have the 'locked' class-name:
    var liElements = document.querySelectorAll('li:not(.locked)');

    // uses Array.prototype.forEach to iterate over the array-like
    // NodeList:
    Array.prototype.forEach.call(liElements, function (li, index, list) {
        // first argument ('li' ): the current array-element,
        // second argument ('index'): unused, the index of the current
        // array-element in the array,
        // third argument ('list'): the array itself

        // adding the 'locked' class-name to the list of classes
        // of the current node:
        li.classList.add('locked');
    });
}