Question

所以我得到了这个有效的代码

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>

<button id="expand" onclick="openAll()">Expand All +</button>

var elems = document.getElementsByTagName("details");

function openAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].setAttribute("open", "true");
  }
  document.getElementById("expand").setAttribute( "onClick", "javascript: closeAll();" );
  document.getElementById("expand").innerHTML = "Collapse All -";
}

function closeAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].removeAttribute("open");
  }
  document.getElementById("expand").setAttribute( "onClick", "javascript: openAll();" );
  document.getElementById("expand").innerHTML = "Expand All +";
}

现在我已经决定要添加第二个按钮，因此我将getElementById更改为getElementsByClassName所以我有

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>
<button class="expand" onclick="openAll()">Expand All +</button>
<button class="expand" onclick="openAll()">another Expand All +</button>

var elems = document.getElementsByTagName("details");

function openAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].setAttribute("open", "true");
  }
  document.getElementsByClassName("expand").setAttribute( "onClick", "javascript: closeAll();" );
  document.getElementsByClassName("expand").innerHTML = "Collapse All -";
}

function closeAll() {
  for (var i = 4; i <= 31; i++){
    elems[i].removeAttribute("open");
  }
  document.getElementsByClassName("expand").setAttribute( "onClick", "javascript: openAll();" );
  document.getElementsByClassName("expand").innerHTML = "Expand All +";
}

首次点击时，代码会展开所有内容，但不会更改文字，也不会折叠。我错过了什么？

Answer 1

PS C:\Users\Andrew> npm ls C:\Users\Andrew `-- (empty) PS C:\Users\Andrew>方法返回元素集合，因此您需要一个循环才能与每个元素进行交互。

getElementsByClassName

对其他功能也这样做。

另外，我认为最好不要为onclick设置属性，而是直接将属性分配给属性。

所以在循环中，改变那一行。

var exp = document.getElementsByClassName("expand");
for (var i = 0; i < exp.length; i++) {
  exp[i].setAttribute( "onClick", "javascript: closeAll();" );
  exp[i].innerHTML = "Collapse All -";
}

Answer 2

另一个问题是你的for循环，你迭代：exp[i].onclick = closeAll; // No parentheses!
但是你想迭代元素的数量：for (var i = 4; i <= 31; i++){ http://jsbin.com/wisepiduwu/edit?html,js,console,output

先前的答案 - ＆gt;部分误解了这个问题：
使用getElementById，您将获得对HtmlElement的引用 - ＆gt; ID必须是唯一的，因此您可以获得一个元素。

id属性指定其元素的唯一标识符（ID）。该值必须在元素的主子树中的所有ID中唯一，并且必须至少包含一个字符。该值不得包含任何空格字符。

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

的getElementById https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

通过其ID返回对元素的引用; ID是一个字符串，可用于标识元素;它可以使用HTML中的id属性或脚本来建立。

getElement <强>取值 ByClassName https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

返回具有全部子元素的所有子元素的类数组对象给定的类名。当调用文档对象时，搜索完整文档，包括根节点。你也可以在任何元素上调用getElementsByClassName（）;它只会返回作为指定根元素的后代的元素给出类名。

由于你有两个带有“expand”类的元素，你必须使用for来迭代这个数组。

Cheerio：）

Answer 3

你的for循环迭代31-4 = 27次，即使你只有两个details标记。 getElementsByClassName返回集合。如果您想使用集合中的项目，则必须使用索引。请尝试以下代码：

var elems = document.getElementsByTagName("details");

function openAll() {
  for (var i = 0; i < elems.length; i++){
    elems[i].setAttribute("open", "true");
  }
  var buttons = document.getElementsByClassName("expand");
  for (var i = 0; i < buttons.length; i++){
    document.getElementsByClassName("expand")[i].setAttribute( "onClick", "javascript: closeAll();" );
    document.getElementsByClassName("expand")[i].innerHTML = "Collapse All -";
  }
}

function closeAll() {
  for (var i = 0; i <elems.length; i++){
    elems[i].removeAttribute("open");
  }
  var buttons = document.getElementsByClassName("expand");
  for (var i = 0; i < buttons.length; i++){
    document.getElementsByClassName("expand")[i].setAttribute( "onClick", "javascript: openAll();" );
    document.getElementsByClassName("expand")[i].innerHTML = "Expand All +";
  }
}

<button class="expand" onclick="openAll()">Expand All +</button>
<button class="expand" onclick="openAll()">another Expand All +</button>

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>

将getElementById更改为getElementsByClassName会破坏代码

3 个答案: