javascript - 无需编写冗余代码即可在单击时使用 JQuery 切换文本和类

Question

代码按预期工作，但它是多余的，如果我们有多个元素，它就会变旧。 我们如何缩短它？

Codepen Demo

$(".i1").click(function () {
    $(".i1 .added").fadeOut(function () {
    $(".i1 .added").text(($(".i1 .added").text() == 'Deposit') ? 'Added' : 
        'Deposit').fadeIn();
        $(this).toggleClass("highlight");
    })
})
    $(".i2").click(function () {
    $(".i2 .added").fadeOut(function () {
    $(".i2 .added").text(($(".i2 .added").text() == 'Deposit') ? 'Added' : 
        'Deposit').fadeIn();
        $(this).toggleClass("highlight");
    })
})
$(".i3").click(function () {
    $(".i3 .added").fadeOut(function () {
    $(".i3 .added").text(($(".i3 .added").text() == 'Deposit') ? 'Added' : 
        'Deposit').fadeIn();
        $(this).toggleClass("highlight");
    })
})

Answer 1

你可以把你的js代码改成this

$(".item-btn").click(function () {
  $(this).find('.added').fadeOut(function () {
    var text = $(this).text();

    $(this).text((text == 'Deposit') ? 'Added' : 'Deposit').fadeIn();
    $(this).toggleClass("highlight");
  })
})