javascript - 仅将 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

有两种方式:

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

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

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

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