$('.fa-heart').click(function(){
if($(this).attr('att') == 0){
$(this).css('color', 'red');
$(this).attr('att',1);
} else {
$(this).css('color', 'grey');
$(this).attr('att',0);
}
});
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HomeShopping</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
</head>
<body>
<i class="fas fa fa fa-heart" att="0" style="color: grey"></i>
</body>
</html>
第一次单击时更改图标并将产品添加到愿望清单数据库
如果我再次单击愿望清单更改的图标,产品应从愿望清单数据库中删除。
我的评论示例:
HTML:
<i class="fas fa fa fa-heart" att="0" style="color: grey"></i>
Ajax呼叫:
$('.fas').click(function() {
var val = $(this).val();
$.ajax({
url: "updatefav.php",
type: "POST",
data: {
id:val
},
success: function(data){
if (data == '1') {
$('.fas').css('color', 'red');
}else{
$('.fas').css('color', 'grey');
}
}
});
});
Php:
if(isset($_POST['id'])){
$id=$_POST['id'];
$select=$mysqli->prepare("SELECT * FROM YOURTABLE WHERE id=?");
$select->bind_param('i',$id);
$select->execute();
$result=$select->get_result();
while($res=$result->fetch_assoc()){
$isfav=$res['wishlist'];
if($isfav=='1'){ //idk how you improve that so suppose 1=is in wishlist and 0=is not
$upd=$mysqli->prepare("UPDATE YOURTABLE SET wishlist='0' WHERE id=?");
$upd->bind_param('i',$id);
$upd->execute();
echo '0';
}else{
$upd=$mysqli->prepare("UPDATE YOURTABLE SET wishlist='1' WHERE id=?");
$upd->bind_param('i',$id);
$upd->execute();
echo '1';
}
}
}