仅将jquery应用于单击的元素子级

Question

我编写了一个非常简单的脚本来切换div，它工作得很好。问题是，由于我使用的选择器，如果我有更多的项目，我将脚本应用于所有项目，并对其中任何一个项目进行单击。我想要实现的是，当我点击一个按钮时，只有它的文本会出现，而其他按钮不会出现。

​

$('.wrapper-button').click(function(){
	$('.wrapper p').toggle();
});

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

.wrapper-text{
  
  background-color:salmon;
}

.wrapper-button{
  background-color:darkred;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
<div class='wrapper-button' id="btn-1">
  Click me
</div>
<p class='wrapper-text' id="txt-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class='wrapper'>
<div class='wrapper-button' id="btn-2">
  Click me
</div>
<p class='wrapper-text' id="txt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

​

我在想，也许我可以为下一项应用数字递增的类，但当我试图选择合适的选择器时，我被卡住了。

Answer 1

使用jquery siblings是其中一种方式。

​

$('.wrapper-button').click(function() {
  $(this).siblings('p.wrapper-text').toggle();

});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper-text {
  background-color: salmon;
}

.wrapper-button {
  background-color: darkred;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class='wrapper-button' id="btn-1">
    Click me
  </div>
  <p class='wrapper-text' id="txt-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<div class='wrapper'>
  <div class='wrapper-button' id="btn-2">
    Click me
  </div>
  <p class='wrapper-text' id="txt-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

​

Answer 2

您可以通过两种方式完成此操作：

首先，使用.find()查找子元素：

$('.wrapper-button').click(function(){
    $(this).parent(".wrapper").find('.wrapper p').toggle();
});

或者，为选择器提供上下文

$('.wrapper-button').click(function(){
    $('.wrapper p', $(this).parent(".wrapper")).toggle();
});

Answer 3

您将切换所有的p，它们是.wrapper-button的兄弟元素。相反，您只需要将当前单击的元素的兄弟元素作为目标：

​

$('.wrapper-button').click(function() {
  $(this).siblings('p').toggle();
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper-text {
  background-color: salmon;
}

.wrapper-button {
  background-color: darkred;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class='wrapper-button' id="btn-1">
    Click me
  </div>
  <p class='wrapper-text' id="txt-1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<div class='wrapper'>
  <div class='wrapper-button' id="btn-2">
    Click me
  </div>
  <p class='wrapper-text' id="txt-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

​