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 来做到这一点，但这看起来不好编码

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

标签： javascriptjqueryhtml

Answer 1

当你有多个相同的元素时，你应该使用 aclass而不是id像下面这样：

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

.Datanewpost {
  padding: 10px;
  background-color: #f7f7f7;
  margin: 5px;
  box-sizing: border-box;
}

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