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');
        }
    });

});

这是 example

Answer 1

在您的问题中，您使用static approach通过jquery选择器获取元素，需要使用dynamic manner在$(this)(refer to the element on which event occur at the time)中进行更改，但是你还需要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');
        }
    });

});

DEMO

Answer 3

尝试FIDDLE

$(".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');
        }
    });

});

我希望这对你有用

Answer 4

根据我的理解，我认为你正在寻找这个解决方案

$(".js-decline, .js-no").click(function () {
var declineTxt = $(this).closest('.decline-li').find('.js-decline-txt');
var declineContent = $(this).closest('.decline-li').find('.decline-content');

var hiding = !declineTxt.hasClass('hide');
if (hiding) {
   declineTxt.addClass('hide');
}

declineContent.toggle("slide", {
    direction: "left"
}, 400, function () {
    if (!hiding) {
        declineTxt.removeClass('hide').css('display','inline-block');
    }
});

}）;

Example

jQuery - 仅选择当前链接

4 个答案: