3

だから私がやろうとしているのは、jqueryを使用したYouTubeの親指アップ/親指ダウン投票システムのようなもので、ユーザーが投票すると、両方のdiv(画像は何でも構いません)がその特定のために利用できなくなることを意味します役職。

これまでのところ、そうするために、内部で toggleClass() が独自のクラスを変更する .click() を使用しています。DOM を調べるとクラスが変更されることがわかりますが、.click() がまだ機能しているのはなぜですか?新しいクラス？

//TO BE CALLED WHEN USER CLICKS VOTE FORGIVENESS
$('.voteUp').click(function() {
    var id = $(this).closest("article").attr("id");

    //Make it impossible to vote again
    $(this).toggleClass('voteUp votedUp');
    $(this).parent().find('.voteDown').toggleClass('voteDown votedDown');

});

そして私のhtml（php）

        <article class='yellowSheet' id='57'>
            <div class="title">
                <h1>StuffUp says :</h1>
                <p class="story">What happened ?</p>
            </div>

            <div class="entryContent">
                <p>guy, 2011-06-28 17:11:48</p>
            </div>

            <div class="voting">
                <img class="voteUp" src="images/thumbsUp.png" /></div>
                <img class="voteDown" src="images/thumbsDown.png" /></div>
            <div class="storyBottom"></div>

        </article>

私が理解できないのは、クラスを切り替えた後でも、新しいクラス「votedDown」をクリックできるのはなぜですか?そのクラスには .click メソッドがないからです。

ありがとうございました

4

6 に答える 6

3

クラス名は、要素を照合するために使用する手段にすぎませんclick。ハンドラーは要素自体に登録されており、クラスを公開しているかどうかに関係なく呼び出されます。

live（）を使用して、要素がまだ初期セレクターと一致する場合にのみ呼び出されるイベントハンドラーを登録できます。

$(".voteUp").live("click", function() {
    // Your event handler.
});
于 2011-06-29T15:15:12.440 に答える
0

実際には、クラスではなく要素にバインドされます。クラス名は、最初のルックアップに使用されます。

この場合、この.unbind()メソッドを使用して、クリックされた後にクリックイベントのバインドを解除する必要があります。$(this).unbind('click');

また

要素を1回だけクリックできる.one() 方法を使用します。

$('.voteUp').one('click', function() {...
于 2011-06-29T15:23:25.847 に答える
0

クリック イベントは既にオブジェクトにバインドされています。クリックイベントが付随することを期待して、クラスを削除することはできません。あなたが望むのは、これを呼び出すことです：

$(this).unbind('click');
于 2011-06-29T15:16:50.057 に答える
0

この時点で問題があるかどうかはわかりませんが、余分な「</div>」があります。問題を明確にするために、必要なものを再フォーマットしました。

<div class="voting">
    <img class="voteUp" src="images/thumbsUp.png" />
</div> <!-- Extra close div -->
    <img class="voteDown" src="images/thumbsDown.png" />
</div>

したがって、このステートメントの find() は何にも一致しないと思います。

 $(this).parent().find('.voteDown').toggleClass('voteDown votedDown');
于 2011-06-29T15:36:45.507 に答える
0

実際には、voteUp を削除して、votedUp を追加します。

$(this).removeClass('voteUp').addClass('votedUp');

クラスを切り替えたい場合は、「voteUp votedUp」ではなく「votedUp」を切り替えてください。「voteUp」に割り当てられたクリック イベントがある場合、トグルに「votedUp」を追加するだけでは、そのクリック バインドは削除されません。

于 2011-06-29T15:17:21.507 に答える
0

.click は、「実行時」にセレクターに一致するすべてのエンティティにイベント ハンドラーをバインドします。そのため、クラスを削除しても、エンティティにはまだクリック イベントがバインドされています。

できることは 2 つのうちの 1 つです。次のいずれかを使用します。

$('.voteUp').live('click', function() { 
    // etc 
} );

「ライブ」は、「クリック」と同じように動作し、セレクターに一致するものをクリックしたときにのみアクティブになり、クリックするたびにこれを分析します。

または、イベント ハンドラーで手動でイベントのバインドを解除できます。たとえば、次のようにします。

$('.voteUp').bind('click.voteUp', function(e) { 
    $(this).unbind('click.voteUp'); 
   // and the rest of what you want to do; 
});

この 2 番目の例では、名前空間付きのイベント ハンドラーも使用しています。これは、jquery の優れた機能です。つまり、名前付きのイベント ハンドラーのみが削除されます。

于 2011-06-29T15:18:43.820 に答える