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

Question

我试图第二次单击复选框时删除类“ active”，就像用户添加图钉时Pinterest对Twitter / Facebook复选框所做的方式一样：

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

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

我有两个问题：

1. 如何在第二次单击复选框时删除“活动” css类？
2. 选中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;
}

Answer 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/

Answer 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悬停）。

演示