javascript - 为类中的所有元素添加唯一的侦听器

Question

是否可以通过 javascript 或 jQuery 向类的所有元素添加唯一的事件侦听器，以便在触发事件时仅针对该元素触发事件，而不是针对具有相同类名的所有元素触发？

例如，如果我有以下 HTML

<div class"clickable-box"><span style="display: none;">Hi There!</span></div>
<div class"clickable-box"><span style="display: none;">Peek-A-Boo!</span></div>
<div class"clickable-box"><span style="display: none;">Now You See Me!</span></div>

...和下​​面的 jQuery

$('.clickable-box').click(function() {
    $('.clickable-box span').slideToggle('slow');
});

...以上将切换显示所有 div 的跨度。

有没有一种方法可以单独触发这些触发器，而不必为每个 div 使用唯一的 id 或类？

Answer 1

你需要

$('.clickable-box').click(function() {
    $(this).find('span').slideToggle('slow');
});

在 div=之后也丢失了class

<div class="clickable-box"><span style="display: none;">Hi There!</span></div>
<div class="clickable-box"><span style="display: none;">Peek-A-Boo!</span></div>
<div class="clickable-box"><span style="display: none;">Now You See Me!</span></div>

演示：小提琴

Answer 2

您应该在搜索跨度时指定上下文：

$('.clickable-box').click(function(){
    $('span', this).slideToggle('slow');
});