Question

我正在尝试更改多行的ID以激活和停用链接，但它仅适用于第一行。有没有办法让它在整个页面上工作？

我想同时更改所有段落

function changediv() {
    if (document.getElementById("enabled")) {
        document.getElementById("enabled").id = "disabled";
    } else {          
        document.getElementById("disabled").id = "enabled";
    }
}

<button type="button" onclick="changediv()">Display</button> <br><br>
<a href="http://www.google.com" id="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" id="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" id="disabled">This is a paragraph.</a>

Answer 1

document.getElementById始终会返回带有id的第一个元素。

因此，如果要选择多个元素，最好使用类，则应使用不同的选择器。

尝试此document.getElementsByClassName而不是

function changediv() {
    if (document.getElementsByClassName("enabled")) {
        document.getElementsByClassName("enabled").className = "disabled";
    } else {          
        document.getElementsByClassName("disabled").className = "enabled";
    }
}

<button type="button" onclick="changediv()">Display</button> <br><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a>

Answer 2

如前所述，元素的ID属性在文档中必须是唯一的

在整个当前文档的范围内，id应该是唯一的

现在，解决方案是使用类对相似元素进行分组，并使用该类访问所有目标元素，您可以使用getElementsByClassName()或querySelectorAll()来实现，如下所示。我使用了querySelectorAll()，因为它返回了非live NodeList

＆＃13;

function changediv() {
  var els = document.querySelectorAll('.disabled, .enabled');
  for (var i = 0; i < els.length; i++) {
    els[i].classList.toggle('enabled');
    els[i].classList.toggle('disabled');
  }
}

＆＃13;

.disabled {
  border: 1px solid red;
  padding: 5px;
  display: inline-block;
  margin-bottom: 5px;
}
.enabled {
  border: 1px solid green;
  padding: 5px;
  display: inline-block;
  margin-bottom: 5px;
}

＆＃13;

<button type="button" onclick="changediv()">Display</button> <br><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a><br>
<a href="http://www.google.com" class="disabled">This is a paragraph.</a>

＆＃13;

Answer 3

您必须将启用和禁用设置为类，而不是ID，而不是使用以下内容：

var enabledunits = getElementsByClassName("enabled");
for(var i = 0; i < enabledunits.length; i++)
{
   enabledunits.item(i).class = "disabled";
}

但要小心，因为如果你把两个for循环放在一起，第二个for循环将删除第一个的效果。

Answer 4

也许您必须使用class属性而不是id属性。类名可以多次使用，而ID是唯一的。

尝试更改多行的ID

4 个答案: