将jquery应用于仅点击元素子项

时间:2018-03-01 07:50:38

标签: javascript jquery

我制作了一个非常简单的脚本来切换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>
&#13;
&#13;
&#13;

我想知道也许我可以申请课程,我会为每一个下一个项目增加数字,但是在尝试选择合适的选择器时我会遇到困难。

6 个答案:

答案 0 :(得分:4)

您可以通过两种方式实现:

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

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

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

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

答案 1 :(得分:2)

使用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>

答案 2 :(得分:1)

您正在切换p s兄弟的所有.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>

答案 3 :(得分:1)

或者您可以使用.next() juqery来切换您想要的下一个元素。在您的案例中为p

$('.wrapper-button').click(function(){
	$(this).next("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>

答案 4 :(得分:1)

您必须使用&#34;此&#34;它引用当前点击的节点,然后找到parent wraaper和finnaly find的paragragh并切换它的显示

见下面的代码:

&#13;
&#13;
$('.wrapper-button').click(function(){
	$(this).parents(".wrapper").find("p").toggle();
});
&#13;
*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

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

.wrapper-button{
  background-color:darkred;
  padding:10px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

你应该使用&#34;这个&#34;而不是上课。

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

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