Question

示例：

如果用户已经在心愿单中添加了产品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
    }
}
?>

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

Answer 2

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

将此更改为

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

Ajax更改图标颜色添加/删除心愿单

2 个答案: