Javascript Ajax请求中的toggleClass不起作用

我在让我的班开始工作时遇到了一点困难。我对javascript非常陌生，所以如果我遗漏了一些非常简单的东西，请原谅我。我希望用户能够喜欢的东西，如图像和帖子。我有一个小心形图标，当点击时会变成红色/黑色，这取决于他们是否正在添加/删除。除了.toggleClass之外，其他一切都可以正常工作。有人能指出我哪里出了问题吗

index.php

---

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

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

---

正如在另一个答案中指出的，您省略了

#

前缀以指示选择器中的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");
      }
    });
  });

---

正如在另一个答案中指出的，您省略了

#

前缀以指示选择器中的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");
      }
    });
  });

---

两个选择器的单击处理程序都已在document ready上注册。这就是为什么只有这些与选择器类匹配的元素才被分配给click处理程序。如果之后切换该类，则必须重新分配单击处理程序

---

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

两个选择器的单击处理程序都已在document ready上注册。这就是为什么只有这些与选择器类匹配的元素才被分配给click处理程序。如果之后切换该类，则必须重新分配单击处理程序

---

---

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

在前端执行查询是一种不好的做法uh@Matt.k该查询是在页面呈现之前在后端使用PHP完成的。@Jay将其显示在视图中不是一个坏主意吗？！我们不知道有什么，如果有的话，框架@Matt.kIt是一个不好的做法，在前端执行查询uh@Matt.k该查询是在页面呈现之前在后端用PHP完成的。@Jay将其显示在视图中不是一个坏主意吗？！我们不知道有什么，如果有的话，@Matt.kt非常感谢你！妈的，我在这上面呆了几个小时都是因为一个#！哈哈。非常感谢：）为什么要使用ID？如果有一个直接指向元素的变量，请使用该变量

var img=$（this）

在click函数中，以及

img.toggleClass（）

在success函数中。要获取具有X id的html元素，必须在选择器中使用#，不使用任何东西按标记获取元素，然后单击。按类获取元素$（this）是触发事件的元素。非常感谢你！妈的，我在这上面呆了几个小时都是因为一个#！哈哈。非常感谢：）为什么要使用ID？如果有一个直接指向元素的变量，请使用该变量

var img=$（this）

在click函数中，以及

img.toggleClass（）

在success函数中。要获取具有X id的html元素，必须在选择器中使用#，不使用任何东西按标记获取元素，然后单击。按类获取元素$（this）是触发事件的元素。我没有使用图像元素。我基本上是将图像的id放在id属性中，然后将其发布到php文件中。然后，该php文件连同用户id一起查询数据库，以检查它是否存在。但是你的答案对我来说仍然很有用，因为我实际上没有使用Javascript的经验，所以这样的事情总是很容易知道的！谢谢，我没有看你的HTML，我假设它是一个图像，因为你调用了变量

img\u id

。但是元素的类型是不相关的，关键是你有一个包含元素的变量，不需要使用ID在回调中找到它。我基本上是将图像的id放在id属性中，然后将其发布到php文件中。然后，该php文件连同用户id一起查询数据库，以检查它是否存在。但是你的答案对我来说仍然很有用，因为我实际上没有使用Javascript的经验，所以这样的事情总是很容易知道的！谢谢，我没有看你的HTML，我假设它是一个图像，因为你调用了变量

img\u id

。但是元素的类型是不相关的，关键是您有一个包含元素的变量，不需要使用ID在回调中找到它。