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()和.find()稍有不同的方法。

即使您在.to-click和.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();
}

只选择与jQuery相同的元素

3 个答案: