javascript - 我强制使用 getElementsByClassName()[] 而不是 getElementByClass()

Question

我有 8 divs带有 id="div1","div2","div3".... 和 class=divs。我还有一个button与class =“div1”，“div2”，“div3”......。

当我点击button时对于id="div1"，它会首先删除所有class="selected"到所有div具有 class="divs" 然后只有 div与 id="div1" 将有 class 已选择。等等......

我想使用document.getElementByClass()用于删除class但它在我的 FIDDLE 中不起作用。 :(

相反，我被迫使用 document.getElementsByClassName()[] 。但它似乎很难编码，因为它需要我为 classname 放置特定的数组。 .

这正是我想要实现的FIDDLE

Answer 1

没有 getElementByClass 是有原因的:与 id 不同，class 未指定为在文档中唯一。你会得到哪个元素？不，你需要有能力获得所有这些。如果你得到一个数组，那就通过循环来解决，而不是通过为每个索引重复行来解决:

但是，你的设计效率很低；如果您已经在使用 jQuery，则可以非常紧凑地编写它。这样会更好:

<button class="divbuttons" data-div="div1">div1</button>
<button class="divbuttons" data-div="div2">div2</button>
...

然后你可以:

$(document).ready(function(){
  $('.divbuttons').click(function() {
    var div = $(this).data("div");
    $('.divs.selected').removeClass('selected');
    $('#' + div).addClass('selected');
  });
});