使用jquery.not与处理程序绑定器上的

我的职能如下：

$(document).on("click", ".songTilesGenreContainer", function () {
    if ($(this).find(".actualTilesContainer").hasClass("minimalized")) {
        $(this).find(".actualTilesContainer").removeClass("minimalized");
        $(this).find(".actualTilesContainer").addClass("maximized");
        $(this).find(".actualTilesContainer").slideDown();
    }
    else {
        $(this).find(".actualTilesContainer").removeClass("maximized");
        $(this).find(".actualTilesContainer").addClass("minimalized");
        $(this).find(".actualTilesContainer").slideUp();
    }
});

每当用户单击.SongTilesGenRectainer时，它都会根据其所属的类向下滑动或滑动。问题是，在该容器中，我有一些可以单击的元素，我希望.songTilesGenreContainer在单击指定元素时不会滑动。据我所知，使用.not函数完全符合我的要求，但如何将其与.on事件处理程序一起使用？

---

谢谢

将一个类添加到您不想执行所需代码的所有元素中。在click处理程序中，检查事件目标，如果它有该类，则什么也不做。试试这个

$(document).on("click", ".songTilesGenreContainer", function (e) {

        //Check if the target has that class
        if($(e.target).hasClass("className")){
            e.stopPropagation();
            return false;
        }

        if ($(this).find(".actualTilesContainer").hasClass("minimalized")) {
            $(this).find(".actualTilesContainer").removeClass("minimalized");
            $(this).find(".actualTilesContainer").addClass("maximized");
            $(this).find(".actualTilesContainer").slideDown();
        }
        else {
             $(this).find(".actualTilesContainer").removeClass("maximized");
            $(this).find(".actualTilesContainer").addClass("minimalized");
            $(this).find(".actualTilesContainer").slideUp();
            }
        }
    });

---

将一个类添加到您不希望执行所需代码的所有元素中。在click处理程序中，检查事件目标，如果它有该类，则什么也不做。试试这个

$(document).on("click", ".songTilesGenreContainer", function (e) {

        //Check if the target has that class
        if($(e.target).hasClass("className")){
            e.stopPropagation();
            return false;
        }

        if ($(this).find(".actualTilesContainer").hasClass("minimalized")) {
            $(this).find(".actualTilesContainer").removeClass("minimalized");
            $(this).find(".actualTilesContainer").addClass("maximized");
            $(this).find(".actualTilesContainer").slideDown();
        }
        else {
             $(this).find(".actualTilesContainer").removeClass("maximized");
            $(this).find(".actualTilesContainer").addClass("minimalized");
            $(this).find(".actualTilesContainer").slideUp();
            }
        }
    });

你可以用

$('.actualTilesContainer').toggleClass('maximized'); //have minimised class as default
$('.actualTilesContainer').slideToggle();

我认为您的if语句是不必要的，特别是对于jQuery

最后的代码如下所示：

$('.songTilesGenreContainer').on('click', '.songTilesGenreContainer', function(){

    $('.actualTilesContainer').toggleClass('maximized'); //have minimised class as default
    $('.actualTilesContainer').slideToggle();
});

你可以用

$('.actualTilesContainer').toggleClass('maximized'); //have minimised class as default
$('.actualTilesContainer').slideToggle();

我认为您的if语句是不必要的，特别是对于jQuery

最后的代码如下所示：

$('.songTilesGenreContainer').on('click', '.songTilesGenreContainer', function(){

    $('.actualTilesContainer').toggleClass('maximized'); //have minimised class as default
    $('.actualTilesContainer').slideToggle();
});

---

您应该将单击处理程序绑定到child，然后执行

event.stopPropagation();

---

这将阻止点击冒泡到“.songTilesGenreContainer”父级

您应该将单击处理程序绑定到child，然后执行

event.stopPropagation();

---

这将阻止点击冒泡到“.songTilesGenreContainer”父级

它们是什么样的元素？如果它们附加了一个单击处理程序，那么您可以这样做：

var $elements = $( ".songTilesGenreContainer" );

$elements.find(".elementsYouDontWantToTriggerSlideUp").on("click", function(ev) {
    ev.stopPropagation();
    // do your stuff
});

// toggle handler is attached >after< (it won't work otherwise, as handlers
// are executed in their bind order)
$elements.on( "click", function( ev ) {
    // >>>> ALWAYS <<<< cache you elements is you reuse them, or use chaining
    var $elelements = $( this ).find(".actualTilesContainer");

    $elelements.toggleClass("minimalized maximized").slideToggle();
});

---

它们是什么样的元素？如果它们附加了一个单击处理程序，那么您可以这样做：

var $elements = $( ".songTilesGenreContainer" );

$elements.find(".elementsYouDontWantToTriggerSlideUp").on("click", function(ev) {
    ev.stopPropagation();
    // do your stuff
});

// toggle handler is attached >after< (it won't work otherwise, as handlers
// are executed in their bind order)
$elements.on( "click", function( ev ) {
    // >>>> ALWAYS <<<< cache you elements is you reuse them, or use chaining
    var $elelements = $( this ).find(".actualTilesContainer");

    $elelements.toggleClass("minimalized maximized").slideToggle();
});

---

你应该把你的东西链起来，缓存你的选择器，这样你就不会执行那么多次的查找了<代码>变量$myThing=$（'.actualTilesContainer'，$（this））

$myThing.removeClass（）.addClass（）.slideDown（）旁注：您确定没有比文档更高效的侦听器了吗？它应该是最接近的祖先，不会因为绑定丢失而被破坏/修改。我使用document是因为它是在jquery文档示例中编写的，不确定是否有更好的方法可以链接您的内容并缓存选择器，这样您就不会多次执行该查找<代码>变量$myThing=$（'.actualTilesContainer'，$（this））
$myThing.removeClass（）.addClass（）.slideDown（）旁注：您确定没有比文档更高效的侦听器了吗？它应该是最接近的祖先，不会因为绑定丢失而受到破坏/修改，不确定jquery文档中是否有更好的方法，它说从1.7版开始，建议不要使用.live，但要使用。在jquery文档中，它说从1.7版开始，建议不要使用.live，但要使用。我尝试了这一点，但对我来说并没有真正起作用，并创建了更多的messok。那么，您能否在代码片段中添加一些HTML内容，并解释一下您想做什么？哪些元素应该/不应该触发效果？：）尝试过这个，但对我来说并没有真正起作用，并且创建了更多的messok。那么，您能否在代码片段中添加一些HTML内容，并解释一下您想做什么？哪些元素应该/不应该触发效果？：）好吧，我的错。。最后，如果（$（e.target）.hasClass（“className”）…，它就可以工作了。。我输入的是.myclass而不是myclass..好吧，我的错。。最后，如果（$（e.target）.hasClass（“className”）…，它就可以工作了。。我输入的是.myclass而不是myclass。。