javascript - 使用 Jquery 隐藏数据

Question

我有五个包含不同数据的按钮

$(".Datanewpost").click(function() {
  $(".data).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data">
  <div id="Datanewpost">
    Data 1
    <div class="data"> Helol</div>
  </diV>
  <div id="Datanewpost">
    data 2
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 3
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
  <div id="Datanewpost">
    data 5
    <div class="data"> Helol</div>
  </div>
</div>

不幸的是，这不起作用，我需要做什么才能得到我想要的东西？我知道我可以通过为每个 div 分配单独的 id 来做到这一点，但这看起来编码很糟糕

注意:我希望能够单独隐藏或显示，

Answer 1

Id 在文档中应该是唯一的，请使用类代替。您可以使用 $(this).find('.data') 切换特定元素:

$(".Datanewpost").click(function(){
  $(this).find('.data').toggle();
});

.data{color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
   <div class="Datanewpost">
      Data 1
      <div class="data">  Hello</div>
   </diV>
   <div class="Datanewpost">
      Data 2
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 3
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 4
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 5
      <div class="data">  Hello</div>
   </div>
</div>

如评论中所述，您要求在单击另一个时关闭打开的 div，只需循环遍历除当前数据之外的所有 .data 即可。然后检查 display='block' 属性将其设置为 display='none':

$(".Datanewpost").click(function(){
  $(this).find('.data').toggle();
  var current = $(this).find('.data');
  $('.data').not(current).each(function(i, el){
    if(this.style.display=='block')
      this.style.display = 'none';
  });
});

.data{
  color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
   <div class="Datanewpost">
      Data 1
      <div class="data">  Hello</div>
   </diV>
   <div class="Datanewpost">
      Data 2
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 3
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 4
      <div class="data">  Hello</div>
   </div>
   <div class="Datanewpost">
      Data 5
      <div class="data">  Hello</div>
   </div>
</div>