0

ユーザーがピンを追加したときに Pinterest が Twitter/Facebook チェックボックスに対して行うのと同じ方法で、チェックボックスを 2 回クリックしたときにクラス「アクティブ」を削除しようとしています。 ここに画像の説明を入力

クリックで「アクティブ」クラスを追加するのは簡単です。ただし、一度追加すると削除する方法がわかりませんでした。私はこれを試しましたが、うまくいきませんでした：

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

2 つの質問があります。

  1. チェックボックスの2回目のクリックで「アクティブな」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;
}
4

2 に答える 2

8

それ以外の

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

使用する

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

編集：

おそらくイベントの伝播が原因で、クリックごとにイベントが 2 回トリガーされます。これを回避するには、ハンドラーを に割り当て、inputその親のクラスを変更します。

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

jsfiddle の確認: http://jsfiddle.net/bpfqB/

于 2012-08-24T20:28:48.077 に答える
1

これは、両方の質問で機能するはずです。

$(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 ホバーをスキップします)。

デモ

于 2012-08-24T20:56:07.103 に答える