jQuery -仅选择当前链接

Question

如何将该功能仅应用于此菜单上的当前链接？如果我单击Decline链接，该函数将应用于所有链接。

我正在使用以下脚本：

$(".js-decline, .js-no").click(function () {
    var declineUser = $('.js-decline-txt');
    var hiding = !declineUser.hasClass('hide');
    if (hiding) {
        $('.js-decline-txt').addClass('hide');
    }

    $(".decline-content").toggle("slide", {
        direction: "left"
    }, 400, function () {
        if (!hiding) {
            $('.js-decline-txt').removeClass('hide').css('display','inline-block');
        }
    });

});

这是一个示例

Answer 1

在您的问题中，您使用static approach通过jquery选择器获取元素，这需要通过使用$(this)(refer to the element on which event occur at the time)在dynamic manner中进行更改，但也需要使用separate both click，因为如果我们想要特定于元素，则需要使用$(this)，而且在这两种情况下，这都引用了在Dom元素动态搜索过程中引起问题的不同元素。

$(".js-decline").click(function () {
    var declineUser =  $(this).find('.js-decline-txt');

    var hiding = !declineUser.hasClass('hide');
    if (hiding) {
        $(this).find('.js-decline-txt').addClass('hide');
    }

    $(this).next("div.decline-content").toggle("slide", {
        direction: "left"
    }, 400, function () {
        if (!hiding) {
            declineUser.removeClass('hide').css('display','inline-block');
        }
    });

});

$(".js-no").click(function () {
       var declineUser =  $(this).parents('li').find('.js-decline-txt');

     var hiding = !declineUser.hasClass('hide');
    if (hiding) {
          $(this).parents('.js-decline-txt').addClass('hide');
    }
    $(this).parents("div.decline-content").toggle("slide", {
        direction: "left"
    }, 400, function () {
        if (!hiding) {
            declineUser.removeClass('hide').css('display','inline-block');
        }
    });

})；

Js Fiddle

Answer 2

关于选择者的一切..。你需要使用$(this) , .find() and .next() ..。

你可以这样用它

$(".js-decline, .js-no").click(function () {
    var declineUser = $(this).find('.js-decline-txt');
    var hiding = !declineUser.hasClass('hide');
    if (hiding) {
        declineUser.addClass('hide');
    }

    $(this).next(".decline-content").toggle("slide", {
        direction: "left"
    }, 400, function () {
        if (!hiding) {
            declineUser.removeClass('hide').css('display','inline-block');
        }
    });

});

演示

Answer 3

试试小提琴

$(".js-decline, .js-no").click(function () {
    var ClickedLink = $(this); // cache the clicked object
    var declineUser = $('.js-decline-txt');
    var hiding = !declineUser.hasClass('hide');
    if (hiding) {
        ClickedLink.next('.js-decline-txt').addClass('hide'); // refer cached object to find referring objects
    }
    ClickedLink.next(".decline-content").toggle("slide", {
        direction: "left"
    }, 400, function () {
        if (!hiding) {
            ClickedLink.removeClass('hide').css('display','inline-block');
        }
    });

});

我希望这对你有用