Ajax 更改图标颜色添加/删除愿望清单答案

【问题标题】：Ajax change icon color add/remove wishlistAjax 更改图标颜色添加/删除愿望清单
【发布时间】：2020-09-22 16:18:38
【问题描述】：

例子：

如果用户已经在心愿单中添加了产品 A，心形图标应显示为红色，如果用户单击添加到心愿单按钮，它将从心愿单中删除产品 A，心形图标应显示为灰色。

<a class='addtowishlist' href='javascript:;' data-data='".$row['p_id']."'><i class='fa fa-heart'></i> Add to Wish list</a>

ajax

<script type="text/javascript">
$(document).ready(function(){
    $(".addtowishlist").live('click', function(evt) {
       var link_data = $(this).data('data');
       $.ajax({
          type: "POST",
          url: 'addtowishlist.php',
          data: ({product_id: link_data}),
          success: function(data) {
          }   
       });   
    }); 
});
</script>

addtowishlist.php

<?php
session_start();
include 'connect.php';

if(isset($_POST['product_id'])) {  
    $addmemberid = $_SESSION['member_id'];
    $addproductid = $_POST['product_id'];

    $result = mysql_query("SELECT count(w_p_id) cnt FROM wishlist WHERE w_m_id = '$addmemberid' AND w_p_id = '$addproductid'") or die(mysql_error());
    $countid = mysql_fetch_assoc($result);
    if($countid['cnt'] == 1){
        mysql_query("DELETE FROM wishlist WHERE w_p_id = '$addproductid' AND w_m_id = '$addmemberid'") or die(mysql_error()); // If product has already added to wishlist then remove from Database
    } else {
        mysql_query("INSERT INTO wishlist SET w_p_id = '$addproductid', w_m_id = '$addmemberid'") or die(mysql_error()); // If product has not in wishlist then add to Database
    }
}
?>

【问题讨论】：

在你的 php 代码中添加一个返回值。在 ajax 成功函数中检查这个返回值。然后根据这个值设置你的心的颜色
@M.G 嗨，你有什么例子吗？我不明白它是如何工作的。

标签： php jquery ajax

【解决方案1】：

为你的心形图标添加一个类。

<i class='fa fa-heart whishstate'>

将您的 addtowishlist.php 更改为类似的内容：

<?php
session_start();
include 'connect.php';

if(isset($_POST['product_id'])) {  
    $addmemberid = $_SESSION['member_id'];
    $addproductid = $_POST['product_id'];

    $result = mysql_query("SELECT count(w_p_id) cnt FROM wishlist WHERE w_m_id = '$addmemberid' AND w_p_id = '$addproductid'") or die(mysql_error());
    $countid = mysql_fetch_assoc($result);
    if($countid['cnt'] == 1){
        mysql_query("DELETE FROM wishlist WHERE w_p_id = '$addproductid' AND w_m_id = '$addmemberid'") or die(mysql_error()); // If product has already added to wishlist then remove from Database
        echo '0';
    } else {
        mysql_query("INSERT INTO wishlist SET w_p_id = '$addproductid', w_m_id = '$addmemberid'") or die(mysql_error()); // If product has not in wishlist then add to Database
         echo '1';
    }
}
?>

然后将您的 ajax 调用更改为类似的内容：

<script type="text/javascript">
$(document).ready(function(){
    $(".addtowishlist").live('click', function(evt) {
       var link_data = $(this).data('data');
       $.ajax({
          type: "POST",
          url: 'addtowishlist.php',
          data: ({product_id: link_data}),
          success: function(data) {
               if(data == '1')
               {
                  $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"red"})
               }
               else{
                   $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"red"})
               }
          }   
       });   
    }); 
});
</script>

【讨论】：

它会更改同一页面中的所有心形颜色，如何解决此问题以仅更改我点击的产品？
非常感谢，您有关于 PHP 到 Ajax 之间发送/返回值的文章吗？我需要了解更多。
看这里，有一个将json返回ajax的解决方案：stackoverflow.com/questions/13366204/…
很高兴能帮上忙。如果我能帮助你，请将我的答案标记为解决方案
让我们continue this discussion in chat.

【解决方案2】：

$(".addtowishlist").live('click', function(evt) {

改成

$(".addtowishlist").on('click', function(evt) {

【讨论】：