javascript - 点击 "getElementsByClassName"隐藏 div

Question

我尝试在按钮上实现一个事件。 当我使用 .onclick 事件单击它时，我将隐藏另一个 div。

问题是我有一个包含更多具有相同类的 div 的列表，因此代码无法正常工作。

      <article class="content__box">
    <h1 class="content__title">About me</h1>
    <div class="content__hide"><span class="fa fa-minus"></span></div>
    <div class="content__text">
      <p>My text here</p>
    </div>
  </article>
  <article class="content__box">
    <h1 class="content__title">About me</h1>
    <div class="content__hide"><span class="fa fa-minus"></span></div>
    <div class="content__text">
      <p>My text here</p>
    </div>
  </article>

我的想法是，当我点击类“content__hide”时，我将从它所属的元素中隐藏 content__text。

Jsfiddle 链接:https://jsfiddle.net/8ddx3kfz/

提前致谢!

Answer 1

将两个函数中的参数替换为正在更改的内容 block 。正如其他人在评论中所述，getElementsByClassName 将返回一个 HTML 集合而不是一个单一元素。 querySelectorAll(只抓取一个元素)也不会很好用，这就是为什么我建议只传入元素本身。

您再次尝试将事件处理程序添加到 HTML 集合中。您需要使用 Array.from() 或 Array.prototype.forEach.call() 将集合转换为数组以循环遍历并分别为每个集合分配一个处理程序按钮。

在事件处理程序中删除任意变量并检查内容 block 本身的可见性。有很多方法可以找到 block ，但由于它们是直接 sibling this.nextElementSibling 就足够了。最后，您检查它是否被隐藏，无论是内联的还是从您的样式表中。检查样式表的成本有点高，但这是您必须采取的措施，因为 block 最初并未在加载时内联隐藏。

var buttons = document.getElementsByClassName('content__hide');

function hide(content) {
  content.style.display = "none";
}

function show(content) {
  content.style.display = "block";
}

Array.from(buttons).forEach(function(button) {
  button.addEventListener('click', function() {
    var content = this.nextElementSibling;
    var contentIsVisible = content.style.display === 'block' || getComputedStyle(content).display && getComputedStyle(content).display === 'block';

    if (contentIsVisible) {
      hide(content);
    } else {
      show(content);
    }
  });
});

.content__box {
  margin: 20px 0;
}

.content__title {
  font-weight: 400;
  color: #999;
  font-size: 26px;
  font-family: 'Montserrat', sans-serif;
  margin: 0px;
  display: inline-block;
}

.content__hide {
  float: right;
  display: inline-block;
  margin-top: 5px;
  cursor: pointer;
  font-size: 22px;
  color: #999;
}

.content__text {
  background: #fff;
  padding: 12px;
  color: #000;
  margin: 10px 0;
}

.content__text p {
  margin: 0px 0px 12px 0px;
}

<article id="despre" class="content__box">
  <h1 class="content__title">Despre mine</h1>
  <button class="content__hide">Hide</button>
  <div class="content__text">
    <p>Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte
      demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje
      Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.</p>
    <p>Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte
      demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje
      Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.</p>
  </div>
</article>
<article id="despre" class="content__box">
  <h1 class="content__title">Despre mine</h1>
  <button class="content__hide">Hide</button>
  </div>
  <div class="content__text">
    <p>Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte
      demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje
      Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.</p>
    <p>Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a industriei încă din secolul al XVI-lea, când un tipograf anonim a luat o planşetă de litere şi le-a amestecat pentru a crea o carte
      demonstrativă pentru literele respective. Nu doar că a supravieţuit timp de cinci secole, dar şi a facut saltul în tipografia electronică practic neschimbată. A fost popularizată în anii '60 odată cu ieşirea colilor Letraset care conţineau pasaje
      Lorem Ipsum, iar mai recent, prin programele de publicare pentru calculator, ca Aldus PageMaker care includeau versiuni de Lorem Ipsum.</p>
  </div>
</article>