-1

我是 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");
    })
});
4

3 回答 3

3

我希望您正在努力实现这一目标：

$(".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 选择，一个类就足够了。
  • 您不想切换 class entry。如果你这样做了，第一次entry被关闭（即类被删除）元素将再次变得不可选择$(".entry")。有一天，这可能是可取的，但不是在这里，我怀疑。
于 2013-01-08T22:28:08.417 回答
0

这段代码不会只是将其设置为活动然后不活动。

$(this).closest(".entry").toggleClass("entry-active entry");
$(".entry").toggleClass("entry not-active");
于 2013-01-08T22:20:52.453 回答
0

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

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

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

希望这是有道理的。

这是一个小提琴，展示了你写的东西以及它是如何破坏的

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

这样做的方法是使用.on()（参见文档）

.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 的答案，但希望这可以帮助您了解这里发生了什么，为什么它不起作用，以及将来如何解决类似的问题。

于 2013-01-08T22:58:59.557 回答