如何使用Javascript更改具有相同类名的多个元素？

Question

跟进我的 之前的问题 - 我想使用按钮来使用JS显示/隐藏多个具有相同类名的元素，但似乎我只能更改特定类名的第一个元素，并且在页面上所有后续相同类名的元素都被忽略。

我该如何解决这个问题？

 function designInfo() {
  document.getElementsByClassName("design")[0].style.display = "block";
  document.getElementsByClassName("it")[0].style.display = "none";
  document.getElementsByClassName("other")[0].style.display = "none";
 }

 function itInfo() {
  document.getElementsByClassName("design")[0].style.display = "none";
  document.getElementsByClassName("it")[0].style.display = "block";
  document.getElementsByClassName("other")[0].style.display = "none";
 }
 
 function allInfo() {
  document.getElementsByClassName("design")[0].style.display = "block";
  document.getElementsByClassName("it")[0].style.display = "block";
  document.getElementsByClassName("other")[0].style.display = "block";
 }

    .it {}
    .design {}
    .other {}

    .indent {
      margin: .5em 1em .5em 1em;
    }

    <button onclick="designInfo()">show design stuff</button>
    <button onclick="itInfo()">show IT stuff</button>
    <button onclick="allInfo()">show all</button>

    <div class="indent">

       <div class="it">• boring IT stuff</div>
       <div class="design">• cool design stuff</div>
       <div class="it">• it stuff and things</div>
       <div class="design">• design stuff</div>
       <div class="it">• it stuff and more</div>
       <div class="other">• more it stuff</div>
       <div class="other">• it stuff</div>
  
    </div>

- escapetomars

---

在选择后使用[0]将获取第一个节点，仅限第一个节点。 - chazsolo

或者，做得“正确”，不要直接操作样式值，而是仅设置一个类（关注点分离）。如果您使用后代选择器，则只需要在共同祖先元素上设置一次，而不是针对每个单独的元素设置。 - CBroe

@escapetomars 同意，只是指出问题的一部分 - 不试图在评论中回答问题。 - chazsolo

为什么你不使用jQuery？ - Akshay Tilekar

weedoze 比我更快展示了实现，但无论如何这是我的 CodePen 链接：https://codepen.io/anon/pen/qrBZrr PS：这个代码使用了一些 es2015 的特性。 - Canastro

Answer 1

你需要使用一个 for 循环遍历你从 document.getElementsByClassName() 方法获得的所有项，如下代码片段所示：

function setDisplay(className, displayValue) {
  var items = document.getElementsByClassName(className);
  for (var i=0; i < items.length; i++) {
    items[i].style.display = displayValue;
  }
}

function designInfo() {
  setDisplay("design", "block");
  setDisplay("it", "none");
  setDisplay("other", "none");
}

function itInfo() {
  setDisplay("design", "none");
  setDisplay("it", "block");
  setDisplay("other", "none");
}

function allInfo() {
  setDisplay("design", "block");
  setDisplay("it", "block");
  setDisplay("other", "block");
}

.it {}
.design {}
.other {}

.indent {
  margin: .5em 1em .5em 1em;
}

<button onclick="designInfo()">show design stuff</button>
<button onclick="itInfo()">show IT stuff</button>
<button onclick="allInfo()">show all</button>

<div class="indent">

   <div class="it">• boring IT stuff</div>
   <div class="design">• cool design stuff</div>
   <div class="it">• it stuff and things</div>
   <div class="design">• design stuff</div>
   <div class="it">• it stuff and more</div>
   <div class="other">• more it stuff</div>
   <div class="other">• it stuff</div>

</div>

更新另外，它可以用更少的代码编写，如下所示：

function filter(designDisp, itDisp, otherDisp) {
  setDisplay("design", designDisp);
  setDisplay("it", itDisp);
  setDisplay("other", otherDisp);
}

function setDisplay(className, displayValue) {
  var items = document.getElementsByClassName(className);
  for (var i=0; i < items.length; i++) {
    items[i].style.display = (displayValue? "block" : "none");
  }
}

.it {}
.design {}
.other {}

.indent {
  margin: .5em 1em .5em 1em;
}

<button onclick="filter(1,0,0)">show design stuff</button>
<button onclick="filter(0,1,0)">show IT stuff</button>
<button onclick="filter(1,1,1)">show all</button>

<div class="indent">

   <div class="it">• boring IT stuff</div>
   <div class="design">• cool design stuff</div>
   <div class="it">• it stuff and things</div>
   <div class="design">• design stuff</div>
   <div class="it">• it stuff and more</div>
   <div class="other">• more it stuff</div>
   <div class="other">• it stuff</div>

</div>

- S.Serpooshan

Answer 2

最好使用显示/隐藏元素的类来实现。你的问题在于你正在使用匹配数组的第一个索引[0]。你需要循环遍历数组中的每个元素以操纵元素。

可以使用以下代码解决问题：

let els = document.querySelectorAll('.myclass');

els.forEach(function(el) {
  el.classList.add('hidden');
});

你可以使用 el.classList.remove(className); 来移除一个类。

注意：forEach是一个ECMAScript 5函数。

- James

Answer 3

getElementsByClassName 返回一个元素数组。您需要逐个迭代它们并更新它们的样式。

var elements = {
  design: document.getElementsByClassName("design"),
  it: document.getElementsByClassName("it"),
  other: document.getElementsByClassName("other")
};

function toggle(type) {
  Object.keys(elements).forEach(function(key) {
    var els = elements[key];
    var state = "none";
    if (key === type) state = "block";
    for (var i = 0; i < els.length; i++) {
      els[i].style.display = state;
    }
  });
}

.indent {
  margin: .5em 1em .5em 1em;
}

<button onclick="toggle('design')">show design stuff</button>
<button onclick="toggle('it')">show IT stuff</button>
<button onclick="toggle('other')">show all</button>

<div class="indent">
  <div class="it">• boring IT stuff</div>
  <div class="design">• cool design stuff</div>
  <div class="it">• it stuff and things</div>
  <div class="design">• design stuff</div>
  <div class="it">• it stuff and more</div>
  <div class="other">• more it stuff</div>
  <div class="other">• it stuff</div>
</div>

- Weedoze

---

@escapetomars 等一下，我会尝试让它更好。 - Weedoze

Answer 4

这是一个与 jQuery 一起制作的简单解决方案。我提供了一个函数，它接受一个参数，即您想要保留在列表中的元素的名称。

var elems = $('.indent').children('div');

function filter(v) {
  elems.filter(function() {
    $(this).show();
    if (!$(this).hasClass(v) && v) {
      $(this).hide();
    }
  });
}

.indent {
  margin: .5em 1em .5em 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="filter('design')">show design stuff</button>
<button onclick="filter('it')">show IT stuff</button>
<button onclick="filter()">show all</button>

<div class="indent">

  <div class="it">• boring IT stuff</div>
  <div class="design">• cool design stuff</div>
  <div class="it">• it stuff and things</div>
  <div class="design">• design stuff</div>
  <div class="it">• it stuff and more</div>
  <div class="other">• more it stuff</div>
  <div class="other">• it stuff</div>

</div>

- kind user

Answer 5

var X = document.querySelectorAll(".className");

for (var i = 0; i < X.length; i++) {

    X[i].style.cssProperty = someNumber + "unitType";

}

示例：X[i].style.width = 100 +％";

如果您希望应用随机整数：

var X = document.querySelectorAll(".className");

for (var i = 0; i < X.length; i++) {

    var rand = Math.floor(Math.random() * someNumber);

    X[i].style.cssProperty = rand + "unitType";

}

- James II

Answer 6

你已经完成了一半：

使用这个函数，传递类名和 'block' 或 'none'

function toggle(className, state){
    elementArray = document.getElementsByClassName(className);

    for(var i = 0; i < elementArray.length; i++){
        elementArray[i].style.display = state;
    }
}

- DeclanPossnett