仅对单击的按钮应用jQuery操作

Question

$(".btn-atc").click(function () {
    $(".btn-atc span").removeClass("blue").addClass("red");
    setTimeout(function () {
        $(".btn-atc span").removeClass("red").addClass("blue");
    }, 1500);
});

Fiddle

我已经完成了上述操作，以便按下按钮可以在点击时让用户知道动作已经完成（蓝色和红色代表购物车图标和加载图标） ）。单击按钮时，它会将功能应用于页面上的每个按钮。我该怎么办才能对按下的按钮执行操作？

Answer 1

使用this，它指的是调用事件的元素。

$(".btn-atc").click(function () {
    $("span", this).removeClass("blue").addClass("red");
    var span = $("span", this);
    setTimeout(function () {
        span.removeClass("red").addClass("blue");
    }, 1500);
});

您也可以使用$(this).find('span')代替$("span", this)

Answer 2

你已经做得对了，只需改变代码中的一点，使用$（this）： -

  $(".btn-atc").click(function () {
    var ref=$(this);
 $(ref).find("span").removeClass("blue").addClass("red");
   setTimeout(function () {
    $(ref).find("span").removeClass("red").addClass("blue");
   }, 1500);
 });

Answer 3

尝试使用“this”

$(".btn-atc").click(function () {
    $(this).next('span').removeClass("blue").addClass("red");
    setTimeout(function () {
        $(this).next('span').removeClass("red").addClass("blue");
    }, 1500);
});