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");
      }
    });
  });

Answer 2

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 3

两个选择器的点击处理程序都已在文档就绪中注册。这就是为什么只有匹配选择器类的元素才会被分配给单击处理程序。如果您之后切换课程，则必须重新分配点击处理程序。

更好的方法是为所有心脏元素注册一个点击处理程序。在click处理程序中，您可以执行switch case语句，在其中相应地切换类。

Ajax请求中的toggleClass不起作用

3 个答案: