使用ajax填充sortlist心脏图标

Question

我正在使用ajax排序列表酒店，当我点击热量图标来自同时从数据库查询时听到图标我呼叫一个功能设置会话后设置会话我想填充心脏图标而不刷新一个页面，然后再次单击相同的心脏图标我想从会话中取消设置特定的ID并将心脏图标显示为空白。 请给我解决方案。 实时网址 - https://www.hotelinkonkan.com

   <a class="clickforact"><i class="fa fa-heart-o" id="boricon1" onclick="cart('<?php echo $id;?>')" ></i> </a>


The Function which is write on this icon click event for add and remove the is from session 

<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
total_cart_items:"totalitems"
},
success:function(response) {
document.getElementById("total_items").value=response;
}
});
});
function cart(id)
{
$('.clickforact').click(function(){
if($(this).find($("i")).hasClass('fa-heart-o'))
{
$(this).find($("i")).removeClass('fa-heart-o').addClass('fa-heart');
}
else if($(this).find($("i")).hasClass('fa-heart'))
{
$(this).find($("i")).removeClass('fa-heart').addClass('fa-heart-o');    
}
});

$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
iteam_id:id
},
success:function(response) {
document.getElementById("total_items").value=response;
}
});
}
function cart_remove(id)
{
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
iteam_id_remove:id
},
success:function(response) {
document.getElementById("total_items").value=response;
}
});
show_cart();
}
function show_cart()
{
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
showcart:"cart"
},
success:function(response) {
document.getElementById("mycart").innerHTML=response;
$("#mycart").slideToggle();
}
});
}
</script>

Answer 1

您多次呼叫事件，因此您遇到问题

1）使用javascript＆＃39; onclick＆＃39; ： onclick =＆＃34;购物车（＆＃39;＆＃39;）＆＃34;

2）用jquery＆＃39;点击＆＃39; ： $（＆＃39; .clickforact＆＃39;）。点击（function（）{}

您只能使用jquery来实现目标。 有了这个：

 //pass data-id with anchor tag
    <a class="clickforact"  data-id="<?php echo $id;?>"><i class="fa fa-heart-o" id="boricon1"  ></i> </a>

仅使用jquery事件

$('.clickforact').click(function(){
if($(this).find($("i")).hasClass('fa-heart-o'))
{
$(this).find($("i")).removeClass('fa-heart-o').addClass('fa-heart');
}
else if($(this).find($("i")).hasClass('fa-heart'))
{
$(this).find($("i")).removeClass('fa-heart').addClass('fa-heart-o');    
}
var id = $(this).data("id"); //<---retrive your id
$.ajax({
type:'post',
url:'./../include/store_items.php',
data:{
iteam_id:id
},
success:function(response) {
document.getElementById("total_items").value=response;
}
});
});