jQuery 在第二次单击时删除类并在第二次单击时禁用悬停

Posted 2023-05-09

【中文标题】jQuery 在第二次单击时删除类并在第二次单击时禁用悬停

【英文标题】：jQuery remove class on 2nd click and disable hover on 2nd click

【发布时间】：2012-08-20 10:00:34

【问题描述】：

当您第二次单击复选框时，我试图删除“活动”类，这与 Pinterest 在用户添加 pin 时为 Twitter/Facebook 复选框所做的方式相同：

在点击时添加“活动”类很容易。但是，我不知道添加后如何将其删除。我试过了，但没有用：

$(".add_link_twitter.active").click(function(e)   
      $(this).removeClass(activePostTwitter); 
    );

我有两个问题：

如何删除'active' css class on 2nd 点击 复选框？ 如何在 Twitter 时禁用 '.add_link_twitter:hover' 复选框被选中？

提前致谢！

这是 jQuery：

var postTwitter = ".add_link_twitter"; 
var activePostTwitter = "active"; 
$(postTwitter).click(function(e)   
  $(this).addClass(activePostTwitter); 
);

这是html：

<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>

这是css：

.add_link_twitter
    position:absolute;
    left:15px;
    bottom:16px;
    color: #a19486;
    border: 2px solid transparent;
    border-color: #F0EDE8;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;


.active 
    border-color: #468BD0;
    color: #468BD0;
    background-color: whiteSmoke;


.add_link_twitter:hover

    color: #A19486;
    border: 2px solid transparent;
    border-color: #C2B1A2;
    border-radius: 4px;
    background-color: white;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;

【参考方案1】：

代替

$(postTwitter).click(function(e)   
  $(this).addClass(activePostTwitter); 
);

使用

$(postTwitter).click(function(e)   
  $(this).toggleClass(activePostTwitter); 
);

编辑：

事件每次点击触发两次，可能是因为事件传播。要解决此问题，请将处理程序分配给 input 并让它更改其父类的类：

$(postTwitter + " input").click(function(e) 
    $(this).parent().toggleClass(activePostTwitter);
);

确认 jsfiddle：http://jsfiddle.net/bpfqB/

【讨论】：

实际上，我尝试过（阅读此内容后 - ***.com/questions/8679246/…）但没有成功。当复选框被选中时，它甚至不会添加“活动”类。有什么线索吗？

很好，非常感谢！！像魔术一样工作。知道如何解决第二个问题：添加“活动”类时如何禁用“.add_link_twitter:hover”？

@Arman 只需为.add_link_twitter .active:hover 设置默认样式，它们应该优先。

我做了'.add_link_twitter .active:hover'，但它完全禁用了悬停。本质上，我希望为“.add_link_twitter”启用悬停，但为“.add_link_twitter .active”禁用悬停。我错过了什么吗？

【参考方案2】：

这应该适用于您的两个问题：

$(function() 
    "use strict";
    var $postTwitter = $("label.add_link_twitter");

    $postTwitter.find("input:checkbox").click(function() 
        $(this).parent().toggleClass("active");
        if($("input.publish_to_twitter").is(":checked")) 
            $(this).parent().removeClass("hover");
        
    );

    $postTwitter.hover(
        function() 
            if($("input.publish_to_twitter").is(":checked")) 
                return;
            

            $(this).addClass("hover");
        ,
        function() 
            $(this).removeClass("hover");
        );
);

您需要对 CSS 进行一些更改，但您必须使用 jQuery 进行悬停（跳过 CSS 悬停）。

DEMO

【讨论】：

嗯，它可以工作，谢谢，但问题是我不能直接将它粘贴到 $(document).ready(function() 中。你知道任何解决方法吗？跨度>

@Arman 为什么不能将其粘贴到$(document).ready(function() 函数中？