jquery类选择器仅捕获类中单击的元素

Here's the demo: https://jsfiddle.net/9fnh6ffy/

这是演示:https://jsfiddle.net/9fnh6ffy/

Here's the HTML:

这是HTML:

<p><a href="#" class="new-answer">New answer</a></p>
<div class="answer-box">
</div>

<p><a href="#" class="new-answer">New answer</a></p>
<div class="answer-box">
</div>

<p><a href="#" class="new-answer">New answer</a></p>
<div class="answer-box">
</div>

I want whenever the .new-answer link is clicked, the corresponding .answer-box underneath it is opened. However I don't want to select it relatively such as using $(this).parents('p').next().toggle because I don't want to get into problem later debugging if I change the DOM.

我想只要点击.new-answer链接,就会打开它下面的相应.answer框。但是我不想相对选择它,例如使用$(this).parents('p')。next()。toggle因为我不想在以后调试时遇到问题,如果我更改DOM。

2 个解决方案

#1

Since you said you don't want dom relationship to be used another approach could be is to use a attribute value. For example you can use a data-id attribute where you specify a number, where the same number will be associated to the related new-answer and answer-box element.

既然你说你不想使用dom关系,另一种方法可能是使用属性值。例如,您可以使用data-id属性指定数字,其中相同的数字将与相关的新答案和答案框元素相关联。

$(document).ready(function() {
  $('a.new-answer').click(function() {
    var id = $(this).data('id');
    $('.answer-box[data-id="' + id + '"]').toggle();
  });
});

.answer-box {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><a href="#" class="new-answer" data-id="1">New answer</a></p>
<div class="answer-box" data-id="1"></div>

<p><a href="#" class="new-answer" data-id="2">New answer</a></p>
<div class="answer-box" data-id="2"></div>

<p><a href="#" class="new-answer" data-id="3">New answer</a></p>
<div class="answer-box" data-id="3"></div>

#2

You need to traverse to parent p element and then target immediate next sibling:

您需要遍历父p元素,然后立即定位下一个兄弟:

$(this).parent().next().toggle();

Working Demo

Update: As the Dom structure may vary:

更新:由于Dom结构可能会有所不同:

$(this).parent().nextAll('.answer-box').first().toggle();

Working Demo