Question

我是jQuery的新手，我可能会以错误的方式解决这个问题。我试图瞄准一个已被切换的div。第一个事件处理程序工作正常（打开），但我无法让第二个工作（关闭）。任何帮助将不胜感激。

$(".entry .tog").unbind();
  $(".entry .tog").click(function(){
        $(this).closest(".entry").toggleClass("entry-active entry");
        $(".entry").toggleClass("entry not-active");

        alert("open");
})

$(".entry-active .tog").unbind();
  $(".entry-active .tog").click(function(){
        $(this).closest(".entry-active").toggleClass("entry-active entry");
        $(".not-active").toggleClass("not-active entry");

        alert("close");
    })
});

Answer 1

我希望你试图实现这个目标：

$(".entry .tog").off('click').on('click', function() {
    var $entry = $(this).closest(".entry").toggleClass("active");
    $(".entry").not($entry).removeClass("active");
    alert($entry.hasClass('active') ? "active" : "not active");
});

注意：

在反相中有两个班是没有意义的。在各方面，无论是CSS样式还是jQuery选择，一个类就足够了。
您不想切换课程entry。如果你这样做了，第一次关闭entry（即删除了类），元素将再次变为$(".entry")无法选择。有一天，这可能是可取的，但不是在这里，我怀疑。

Answer 2

此代码不会将其设置为活动状态，然后不会激活。

$(this).closest(".entry").toggleClass("entry-active entry");
$(".entry").toggleClass("entry not-active");

Answer 3

我不确定我是否看到了你的绑定点，特别是因为他们只会运行一次（他们没有附加到任何事件处理程序或其他任何你发布的内容）。

我倾向于同意@ Beetroot-Beetroot关于不试图强迫他们互相切换的答案。但在学习方面，我会指出你试图做的根本问题。

您的基本问题是您在运行时直接绑定这些元素。一旦你的click绑定被设置，就会发生什么：即使你改变附加到这些div的类，绑定本身仍然附加到那些相同的元素。这基本上意味着只有你的第一个事件处理程序连接到任何东西，因为在你调用它时没有任何东西与第二个事件处理程序匹配。即使你的第一个事件处理程序运行并切换了类，它仍然是一个（并且只有一个）附加到所有类。

希望这是有道理的。

Here is a fiddle showing what you wrote and how it breaks

您需要做的是使用事件冒泡：您可以将事件处理程序附加到封装这些事件并且不是动态的元素，然后根据实际调用的处理程序的动态属性做出决策。

执行此操作的方法是使用.on()（see the documentation）

带有以下脚本的

Here is a working fiddle using .on：

$('.wrapper').on('click', ".entry .tog", function() {
    $(this).closest(".entry").toggleClass("entry-active entry");
    $(".entry").toggleClass("entry not-active");

    alert("open");
});


$('.wrapper').on('click', ".entry-active .tog", function() {
    $(this).closest(".entry-active").toggleClass("entry-active entry");
    $(".not-active").toggleClass("not-active entry");

    alert("close");
});

基本上我创建了一个.wrapper类，我附加到一个包含所有条目和togs的div。我将.on()事件处理程序绑定到那个，一个绑定具有第一组类的选择器，然后另一个绑定具有第二组绑定。

我仍然建议@ Beetroot-Beetroot的答案，但希望这可以帮助你理解这里发生的事情，为什么它不起作用，以及如何在将来解决类似的问题。

jQuery无法定位切换类

3 个答案: