2

ゲームの好き嫌いのリンクを張っています。最初はいいねがアクティブで、ユーザーがいいねをクリックすると表示されます

 unlike link 
 1 like this game

それは大丈夫です。しかし、異なるリンクをクリックすると、ページがリロードされます。ページをリロードしたくない

<div class="gameLikeStatus">
 <a href="likeit" id="likeitlink">Like</a>
</div>
<div class="totalLikes">
<span id="likesCount"><s:property value="likes"/></span> like this game<br>
</div>
<script>

$('a#likeitlink').bind('click',function(event){
    event.preventDefault();
    $('.gameLikeStatus').html('<a href="unlikeit" id="Unlikeitlink">Unlike</a>');
    $likesNo= $('#likesCount').html();
    $likesNo++;
    $('#likesCount').html(""+$likesNo);

}); 

$('a#Unlikeitlink').bind('click',function(event){
    event.preventDefault();
    $('.gameLikeStatus').html('<a href="likeit" id="likeitlink">Like</a>');
    $likesNo= $('#likesCount').html();
    $likesNo--;
    $('#likesCount').html(""+$likesNo);
}); 

</script>
4

2 に答える 2

3

交換

$('a#Unlikeitlink').bind('click',function(event){

と

$('.gameLikeStatus').on('click', '#Unlikeitlink', function(event){

（もう一方も同様）

を実行しているとき$('a#Unlikeitlink').bind、リンクがまだ存在しないため、コレクションは空であるため、これは何もしません。onは、まだ存在していないオブジェクトへの委任を有効にします。コールバックをバインドしなかったため、通常のリンク動作を妨げていなかったため、問題が発生しました。

インクリメントまたはデクリメントする html も解析する必要があります。

$('.gameLikeStatus').on('click', '#likeitlink', function(event){
    event.preventDefault();
    $('.gameLikeStatus').html('<a href="unlikeit" id="Unlikeitlink">Unlike</a>');
    $likesNo= parseInt($('#likesCount').html(), 10) || 0;
    $likesNo++;
    $('#likesCount').html(""+$likesNo);
}); 

$('.gameLikeStatus').on('click', '#Unlikeitlink', function(event){
    event.preventDefault();
    $('.gameLikeStatus').html('<a href="likeit" id="likeitlink">Like</a>');
    $likesNo= parseInt($('#likesCount').html(), 10) || 0;
    $likesNo--;
    $('#likesCount').html(""+$likesNo);
});

(毎回読み取るのではなく、より単純にグローバル変数に保持することもできます)

デモンストレーション

于 2012-11-23T13:28:40.313 に答える
0

古いバージョンの jQuery を使用している可能性があります。1.7 より前のバージョンの jQuery では、1.7 とは異なる方法でイベント リスナーを追加する必要があります。.on の代わりに .live を使用します。

例：

$('.gameLikeStatus').live('click', function(event){
    // Your code here
});
于 2012-11-30T00:21:34.680 に答える