Question

我正在使用我找到的手风琴风格脚本工作。我对jquery / javascript很新，所以请耐心等待......

我的基本页面打开一个手风琴，第一个被锁定打开，其他按钮打开/关闭。什么让我的顶部面板锁定打开是

<li class="locked">.

其他小组只有

 <li>

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

 <li class="somethingelse">

我想在我的顶部面板中按一个按钮来改变所有的按钮

到

   <li class="locked">, so that the user can view the entire site.

我试过了：

 <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>

Answer 1

你应该改变元素类，如下所示

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

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

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

所以你的最终功能如下：

＆＃13;

function myFunction() {
  var nodes = document.getElementsByClassName("somethingelse");
  var arr = Array.prototype.slice.call(nodes);
  arr.forEach( function(node) {
      node.className = "locked";
  });
}

＆＃13;

li {
  color: #000000;
}
li.locked {
  color: #ff0000;
}

＆＃13;

<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>

＆＃13;

Answer 2

在简单的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');
    });
}

＆＃13;

li {
  opacity: 0.3;
}

li.locked {
  opacity: 1;
}

＆＃13;

<div>
  <ul>
    <li class="locked">Something
      <button onclick="myFunction()">Click me</button>
    </li>
    <li class="somethingelse">somethingelse</li>
    <li class="somethingelse">somethingelse</li>
  </ul>
</div>

<script>
function myFunction() {
  var liElements = document.querySelectorAll('li:not(.locked)');

  Array.prototype.forEach.call(liElements, function (li, index, list) {
    li.classList.add('locked');
  });
}
</script>

＆＃13;

此外，我建议在JavaScript中绑定事件处理，而不是使用内联HTML属性（onclick等），这样可以更轻松地进行长期维护（因为所有内容都是＆＃39 ; s在同一个地方更新，您不必记住所有事件处理的分配位置）：

＆＃13;

function myFunction() {
  var liElements = document.querySelectorAll('li:not(.locked)');

  Array.prototype.forEach.call(liElements, function(li, index, list) {
    li.classList.add('locked');
  });
}

// finding the first element that matches the CSS selector.
// adding the named function (myFunction) as a 'click'
// event-handler:
document.querySelector('li.locked button').addEventListener('click', myFunction);

＆＃13;

li {
  opacity: 0.3;
}
li.locked {
  opacity: 1;
}

＆＃13;

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

＆＃13;

参考文献：

CSS：
- Negation (:not()) pseudo-class。
JavaScript的：

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

2 个答案: