jQuery悬停中断toggleClass

Posted 2023-05-08

【中文标题】jQuery悬停中断toggleClass

【英文标题】：jQuery hover interrupting toggleClass

【发布时间】：2020-09-07 00:37:38

【问题描述】：

所以下面是我的脚本。我打算做一些非常基本的事情，即悬停在不同按钮（常规/非活动和活动）上时具有不同的背景颜色。点击后，在两种状态之间切换。

现在，此代码可以正确悬停，但不会切换。

<script type="text/javascript">
    $(".button").hover(
        function() 
            $(this).css("background-color", "#E4E4E4");
        ,
        function() 
            $(this).css("background-color", "#EDEDED");
        
    );
    $(".active").hover(
        function() 
            $(this).css("background-color", "#F5F9FF");
        ,
        function() 
            $(this).css("background-color", "#EBF3FF");
        
    );
    $(".button").click(function() 
        alert("The button is clicked!");
        $(this).toggleClass("active");
    );
</script>

而且，此代码确实会切换，但我必须禁用悬停才能发生它

<script type="text/javascript">/*
    $(".button").hover(
        function() 
            $(this).css("background-color", "#E4E4E4");
        ,
        function() 
            $(this).css("background-color", "#EDEDED");
        
    );
    $(".active").hover(
        function() 
            $(this).css("background-color", "#F5F9FF");
        ,
        function() 
            $(this).css("background-color", "#EBF3FF");
        
    );*/
    $(".button").click(function() 
        alert("The button is clicked!");
        $(this).toggleClass("active");
    );
</script>

TL;DR 我不能同时使用hover() 和toggleClass()。 注意：虽然会显示警报。

【问题讨论】：

没有sn-p，无法确认是否是这个问题，但是：api.jquery.com/hover ""绑定一个或两个处理程序到匹配的元素，当鼠标执行时指针进入并离开元素” - 如果您在按钮上方添加active，您将不会获得悬停事件

问题是$(".class").event 仅适用于在调用代码时存在的元素。当您运行 $(".active") 时，当时没有 .active 元素，因此不会分配悬停。

这是你想要的吗？ jsfiddle.net/bnp756eu

同样的问题适用 - 对于那些在您调用 $(".active").hover 时为 .active 的人，即使您删除了 .active，也会获取事件并保留该事件。您的代码没有说“将悬停应用到 [所有] 活动元素”，而是说“获取 [当前] 活动元素并将悬停应用到它们”

你能重新描述一下这个问题吗？它做了什么你不想要的？它不做什么？如上所述，悬停不适用于新切换的项目。 toggleClass 可以正常工作，如下所示（切换类会更改字体）jsfiddle.net/u8s2wbzL 切换类不会使“其他”悬停效果起作用

【参考方案1】：

我加入了关于您尝试在当时 DOM 中不存在的元素上生成的事件的评论。

您可以使用 css 设置元素的样式，然后使用 javascript 在单击时触发该类。

$(".button").click(function() 
    $(this).toggleClass("active");
);

button 
    background-color: blue;


button:hover 
    background-color: royalblue;


button.active 
    background-color: purple;


button.active:hover 
    background-color: rebeccapurple;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">
  Click Me
</button>
<button class="button active">
  Click Me
</button>

【讨论】：

同意，这就是我要去的地方：jsfiddle.net/keyn1dow 如果您将 jsfiddle 代码添加到答案中的 sn-p 中，您会得到我的支持 - 它回答了问题的要求，但 OP 似乎并不相信实际问题。

对答案进行了一些调整 - 使其成为一个声明而不是一个问题，并添加了 OP“默认为活动按钮”

但这仍然不能解释我的代码中的问题是什么。

好吧，我之前已经解释过了 :) 但不要担心，使用 css :hover

什么？我还是不明白为什么 $(this).toggleClass("active");当悬停代码存在时不起作用，但在悬停代码被注释掉时起作用。不应该独立于hover吗？