HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event">
<div class="clicker">
click
</div>
<div class="title">
<a href="#">first event</a>
</div>
</div>
<div class="event">
<div class="clicker">
click
</div>
<div class="title">
<a href="#">first event</a>
</div>
</div>
<div class="event">
<div class="clicker">
click
</div>
<div class="title">
<a href="#">second event</a>
</div>
</div>
<div class="event">
<div class="clicker">
click
</div>
<div class="title">
<a href="#">second event</a>
</div>
</div>
<div class="event">
<div class="clicker">
click
</div>
<div class="title">
<a href="#">second event</a>
</div>
</div>
<div class="event">
<div class="clicker">
click
</div>
<div class="title">
<a href="#">second event</a>
</div>
</div>
这给了我一个foo每个第一个实例的类event在一个小组中与a具有相同文本的标签。
现在我想要这样，每当我点击clicker，我想要所有的.event具有相同的 div.event .title a文本重新出现。
（更新代码以显示正确的结构以及解决方案不起作用的原因。每当我单击“点击器”时，它都会将代码应用于所有事件）
您需要将点击事件附加到event类，那么当用户单击 div 时，您可以获得锚点的文本并使用contains选择器来过滤具有相同标题文本的事件：
$('.event').click(function() {
$('.event a:contains(' + $('a', this).text() + ')').closest('.event').toggleClass('foo');
});
.foo {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event">
<div class="title">
<a href="#">first event</a>
</div>
</div>
<div class="event">
<div class="title">
<a href="#">first event</a>
</div>
</div>
<div class="event">
<div class="title">
<a href="#">second event</a>
</div>
</div>
<div class="event">
<div class="title">
<a href="#">second event</a>
</div>
</div>
<div class="event">
<div class="title">
<a href="#">second event</a>
</div>
</div>
<div class="event">
<div class="title">
<a href="#">second event</a>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
