AjaxリクエストのtoggleClassが機能しない

Question

.toggleClassを動作させるのに少し問題があります。私はjavascriptに非常に新しいので、ここで本当にシンプルな何かを逃した場合、私を許してください。私はユーザーが画像や投稿のようなものを好きになるようにしたい。クリックすると、追加/削除しているかどうかによって、赤/黒に変わるはずの小さな心臓アイコンがあります。 .toggleClassとは別にすべてが機能します。誰かが間違っているところを指摘できますか？

のindex.php

---

<div class="heart-box"> 
    <?php 
//Check if user has fav'd the image.. 
    $hasFav = db::getInstance()->query("SELECT * FROM favourites WHERE userID = ? AND img_id = ?", array($the_user, $img_id)); 
    $action = $hasFav->results() ? 'unfav-heart' : 'fav-heart'; 
    ?> 

    <div class="<?php echo $action; ?> fa fa-heart" id="<?php echo $img_id; ?>" ></div> 
</div> 

---

スクリプト

---

$(document).ready(function(){ 


    //add to favourites... 
    $('.fav-heart').click(function(){ 
    var img_id = $(this).attr('id'); 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     $(img_id).toggleClass("unfav-heart"); 
     } 
    }); 
    }); 
    // remove from favourites... 
    $('.unfav-heart').click(function(){ 
    var img_id = $(this).attr('id'); 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     $(img_id).toggleClass("fav-heart"); 
     } 
    }); 
    }); 
}); 

---

Answer 1

jQueryのidをセレクタで＃が必要になります。他の回答で指摘したように

$(document).ready(function(){ 


    //add to favourites... 
    $('.fav-heart').click(function(){ 
    var img_id = $(this).attr('id'); 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     $("#"+img_id).toggleClass("unfav-heart"); 
     } 
    }); 
    }); 
    // remove from favourites... 
    $('.unfav-heart').click(function(){ 
    var img_id = $(this).attr('id'); 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     $("#"+img_id).toggleClass("fav-heart"); 
     } 
    }); 
    }); 
}); 

Answer 2

、あなたはセレクタでIDを示すために#接頭辞を残しました。しかし、要素に直接指す変数があるため、セレクタを使用する必要はありません。

$('.fav-heart').click(function(){ 
    var img = $(this); 
    var img_id = this.id; 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     img.toggleClass("unfav-heart"); 
     } 
    }); 
    }); 

Answer 3

両方のセレクタのクリックハンドラは、ドキュメントの準備ができた状態で登録されています。そのため、セレクタクラスに一致する要素のみがクリックハンドラに割り当てられます。後でクラスを切り替えると、クリックハンドラを再割り当てする必要があります。

より良いアプローチは、すべての心臓要素に対してクリックハンドラを登録することです。クリックハンドラの内部では、クラスをそれに応じて切り替えるスイッチケースステートメントを実行します。