jquery - 只选择元素与jquery相同的div

Question

<div class="wrapper">
<div class="to-click">
<h1>click me</h1>
</div>
<div class="to-show">
<p>this text will appear when clicked</p>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<h1>click me</h1>
</div>
<div class="to-show">
<p>this text will appear when clicked</p>
</div>
</div>

我有未知数量的 div，每个 div 都有一个要单击的元素和一个要切换的元素

$('.to-show').hide();
$('.to-click').click(function () {
$('.to-show').toggle();
});

我希望当我单击第一个 H1 时只显示第一个 p，当单击第二个 h1 时显示第二个 p，依此类推

Answer 1

其他答案很好，但我会推荐一种稍微不同的方法，使用.closest()and .find()。

即使您在.to-clickand之间添加一些.to-show内容，如果它们被还原或者即使它们不是兄弟姐妹，此版本也将起作用。这样，只要它们有共同的祖先，它就不太依赖于您的 HTML 结构。

演示：

$('.to-show').hide();
$('.to-click').on('click', function () {
  $(this).closest('.wrapper').find('.to-show').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="to-click">
    <h1>click me</h1>
  </div>
  <div class="to-show">
    <p>this text will appear when clicked</p>
  </div>
</div>
<div class="wrapper">
  <div class="to-click">
    <h1>click me</h1>
  </div>
  <div class="to-show">
    <p>this text will appear when clicked</p>
  </div>
</div>

Answer 2

您可以使用 jQuery 的 next() 选择器来识别下一个要显示的类并切换它：

$('.to-show').hide();
$('.to-click').click(function() {
  $(this).next(".to-show").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="to-click">
    <h1>click me</h1>
  </div>
  <div class="to-show">
    <p>this text will appear when clicked</p>
  </div>
</div>
<div class="wrapper">
  <div class="to-click">
    <h1>click me</h1>
  </div>
  <div class="to-show">
    <p>this text will appear when clicked</p>
  </div>
</div>

Answer 3

如果您无法编辑 div 以为其提供 ID，则可以使用您单击的项目来查找要切换的后续项目。像这样的东西：

$('to-click').click(function() {
    // close any existing shown items
    // comment this out if you want multiple items at the same time.
    $('.to-show').hide();  

    var $self = $(this); // this will be the element clicked
    // find the parent then select the '.to-show'
    var $to_show = $self.parent().find('.to-show')
    $to_show.toggle();
}