如何用jQuery仅为点击的单个span元素添加class（无需设置id）

当前使用jQuery代码点击.bay-btn时，所有该类名的span都会被加上bay-btn-clicked类，希望只给被点击的那个span添加类，且不想为每个span单独设置id。

现有jQuery代码 #

$(".bay-btn").click(function (e) { 
    e.preventDefault();
    $(".bay-btn").addClass('bay-btn-clicked');
});

HTML结构 #

<div class="type1 types">
    <div class="img-con"><img src="/src/shop/imgs/black-sh.jfif" alt=""></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius esse consequatur magnam exercitationem quisquam.</p>
    <span class="cost">10$</span>
    <span class="bay-btn">Bay</span>
</div>
<div class="type2 types">
    <div class="img-con"><img src="/src/shop/imgs/red-sh.jfif" alt=""></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius esse consequatur magnam exercitationem quisquam.</p>
    <span class="cost">10$</span>
    <span class="bay-btn">Bay</span>
</div>

问题根源是你使用了全局选择器$(".bay-btn")添加类，这会选中所有匹配元素。要只操作触发事件的元素，直接用事件回调中的$(this)即可，它指向当前被点击的DOM元素：

$(".bay-btn").click(function (e) { 
    e.preventDefault();
    $(this).addClass('bay-btn-clicked');
});

如果需要实现点击切换类（点击后再次点击移除类），可以替换addClass为toggleClass：

$(".bay-btn").click(function (e) { 
    e.preventDefault();
    $(this).toggleClass('bay-btn-clicked');
});

如果需要互斥效果（同一时间只有一个按钮拥有该类），可以先移除所有同类元素的类，再给当前元素添加：

$(".bay-btn").click(function (e) { 
    e.preventDefault();
    $(".bay-btn").removeClass('bay-btn-clicked');
    $(this).addClass('bay-btn-clicked');
});

内容的提问来源于stack exchange，提问作者maimon