0

ということで、例を挙げて説明していきます。

フィードまたはストリームに「いいね」ボタン (クラス: .like) があります。ユーザーが ( $(".like") を使用して) クリックすると、(jQuery を使用して) データベースに like をリフレッシュレスで挿入する方法である ajax が実行されます。

挿入したら、テキストを「Unlike」に、クラスを「.unlike」に変更します。

ただし、ユーザーがそれを再クリックすると、$(".unline").click 関数に移動する代わりに、同じ関数を再度実行するだけです。スクリプトなどを「更新」する必要がありますか?

例えば：

    $(".like").click(function(){
       alert("Like!");
       $(this).attr("class", "unlike");
    });
    $(".unlike").click(function(){
       alert("Unlike!");
       $(this).attr("class", "like");
    });

問題は、属性が変更されても、似たような機能を繰り返すだけで、そうでない機能にならないことです。

4

8 に答える 8

1

クリック イベントを委任したくない場合 (これは IMO のオーバー エンジニアリングです)、ハンドラーでチェックを行います。

$(".like").click(function(){
   alert( $(this).hasClass('unlike') ? 'unlike' : 'like' );
   $(this).toggleClass("unlike like");
});

http://jsfiddle.net/NScyM/

クラスをクリックして期待どおりに切り替えるたびに、「似ていない」クラスをチェックする必要があります。

于 2012-10-12T00:01:56.713 に答える
1

上記のコードを run に割り当てると、イベント バインディングが発生します。毎回イベントを再バインドする必要があります。または、さらに良いのは、イベント委任を使用することです。

$(document)on("click",".like",function(){
   alert("Like!");
   $(this).addClass("unlike");
   $(this).removeClass("like");
});
$(document)on("click",".unlike",function(){
   alert("Unike!");
   $(this).addClass("like");
   $(this).removeClass("unlike");
});
于 2012-10-11T23:44:51.723 に答える
1

それは、「似ていない」属性のためです。スクリプトがロードされたときに dom に追加されていません。これを試して：

<body>
<div class="like_it_or_not">
   HELLO!
</div>
</body>

そして、JS

$("body").on('click','.like_it_or_not', function(){
    $(this).toggleClass('like', 'unlike');
    if ($(this).hasClass('like')) {
       alert('like');
    } else if ($(this).hasClass('unlike')) {
       alert('unlike');
    }
});
于 2012-10-11T23:47:52.370 に答える
0

これを試してみてください

$(".like").click(function(){
   alert("Like!");
   $(this).removeClass("like");
   $(this).attr("class", "unlike");
});
$(".unlike").click(function(){
   alert("Unlike!");
   $(this).removeClass("unlike");
   $(this).attr("class", "like");
});
于 2012-10-11T23:45:10.313 に答える
0

これを機能させるには、 live()またはon()を使用する必要があると思います。

 $(".like").live("click", function() {
    $(this).removeClass("like").addClass("unlike");
 });
 $(".unlike").live("click", function() {
    $(this).removeClass("unlike").addClass("like");
 });
于 2012-10-11T23:45:11.183 に答える
0

このようなものでコードをきれいに保つために、変更されないクラスを割り当て、クリックイベントをそれに結び付けます。スタイリング クラスは、単に CSS の変更として機能します。例えば：

<button class="vote like">button text</button>

$('.vote').click(function () {
    var alertText = ($(this).hasClass('like')) ? 'Like!' : 'Unlike!';
    alert(alertText);
    $(this).toggleClass('like').toggleClass('unlike');
});
于 2012-10-11T23:46:48.427 に答える
0

これを試して

$(document).on('click', '.like', function(){
   alert("Like!");
   $(this).html('Unlike').removeClass("like").addClass("unlike");
});

$(document).on('click', '.unlike', function(){
   alert("Unlike!");
   $(this).html('Like').removeClass("unlike").addClass("like");
});

デモ。

于 2012-10-11T23:49:11.057 に答える
-1

unlikeクリック イベント ハンドラが新しいアイテムに関連付けられていません。onそのようにクラスを動的に変更する場合は、(jQueryハンドラー) [http://api.jquery.com/on/]を確認する必要があります。

$(document).on('click',".like", function(){
   alert("Like!");
   $(this).addClass("unlike").removeClass('like');

});
$(document).on('click',".unlike",function(){
   alert("Unlike!");
   $(this).addClass("like").removeClass('unlike');
});
于 2012-10-11T23:45:04.360 に答える