Question

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

问题是我有一个列表，其中包含更多具有相同类的div，因此代码不是wrking。

      <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

将两个函数中的参数替换为要更改的内容块。正如其他人在评论中所述，getElementsByClassName将返回HTML集合与一个单数元素。 querySelectorAll（只抓取一个元素）也不会工作太大，这就是为什么我建议只传递元素本身。

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

在事件处理程序中删除任意变量，而是检查内容块本身的可见性。有很多方法可以找到这个块，但因为他们直接兄弟姐妹this.nextElementSibling就足够了。最后，检查它是隐藏的，内联还是样式表。检查样式表有点贵，但这是一个必须采取的措施，因为这些块最初并未在内嵌时隐藏。

＆＃13;

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);
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

for(let btn of document.getElementsByClassName('content__hide')){
  btn.onclick=function(){
    this.parentNode.querySelector(".content__text").style.display="none";
  }
}

这样可行。该代码有2个问题。首先，当你获得多个元素时。您需要使用for为所有按钮设置onClick功能。其次，他们没有id属性。因此，您需要使用其他方式来定位要隐藏的元素。在这里，我获得按钮的父元素，并找到要隐藏的目标。

Answer 3

想象一下，我有一个图标（<i>）我用作id =“searchbutton”的按钮，我想显示一个文本框，如果我点击它，如果它打开，我再次点击，我想要它消失了。试试这个：

<i class="fa fa-search" aria-hidden="true" id="searchbutton"></i>
<input id="searchtext" type="text">

JS使用jquery：

var isSearchOn = false;

$('#searchbutton').click(event, function() {
  if (isSearchOn) 
  {
     $('#searchtext').hide();
     isSearchOn = false; 
  }
  $('#searchtext').show();
  isSearchOn = true;
}

Answer 4

我建议您使用JQuery，因为将来会更容易。要了解它，您可以在互联网上使用多个教程，如codecademy.com或www.w3schools.com。

此代码仅用于隐藏文本，但如果您需要，请通知我。

在你的头元素中添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

然后在脚本中：

$(document).ready(function(){
$('.content__hide').click(function(){       
    $(this).siblings('.content__text').hide();
});

}）;

单击“getElementsByClassName”隐藏div

4 个答案: