javascript - 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

正如另一个答案中所指出的，您省略了 # 前缀来指示选择器中的 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");
      }
    });
  });