Javascript Jquery onclick事件图标颜色未更改

例如，这里我有三个图标（fa-fa-heart），通常图标颜色为绿色，我的要求是，如果单击图标2，背景颜色应使用onclick事件更改为红色。假设我再次单击相同的图标2表示背景颜色应变为绿色，然后单击图标3表示背景颜色应变为红色，我已尝试过，但无法做到这一点。我得到的答案是这样的，如果我点击图标2，图标1的颜色正在改变。如果单击图标3，则图标1的颜色正在更改。就像每次图标1改变颜色一样

<div class = "col-md-8 top-a rentListing"> </div>

 function searchLocality() {

   var city = "something";
   var locality = "something";

   $.ajax({
     type: "POST",
     data: {
       city: city,
       locality: locality
     },
     url: "rentlocalityFilter.php",
     success: function(data) {

       var htmlString = '';
       $.each(res['data'], function(key, value) {
         var id = value.id;
         htmlString += '<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: green;" id="button" onclick="setColor(' + value.id + ')"></i></a>';

       });
       $('.rentListing').empty().append(htmlString);

     }

   });

 }
 var count = 1;

 function setColor(id) {
   var btn = 'button';
   var color = '#101010';

   var property = document.getElementById(btn);
   if (count == 0) {
     property.style.backgroundColor = "green"
     count = 1;
   } else {
     property.style.backgroundColor = "red"
     count = 0;
   }
 }

函数searchLocation（）{
var city=“某物”；
var locality=“某物”；
$.ajax({
类型：“POST”，
数据：{
城市:城市,，
地点：地点
},
url:“rentlocalityFilter.php”，
成功：功能（数据）{
var htmlString=''；
$.each（res['data']，函数（键，值）{
var id=value.id；
htmlString+=''；
});
$（'.rentListing'）.empty（）.append（htmlString）；
}
});
}
var计数=1；
函数setColor（id）{
变量btn='按钮'；
var color='#101010'；
var属性=document.getElementById（btn）；
如果（计数=0）{
property.style.backgroundColor=“绿色”
计数=1；
}否则{
property.style.backgroundColor=“红色”
计数=0；
}
}

每次单击心脏时，该类将被切换-如果它存在，则将被删除

这可以进一步发展为

$(this).toggleClass('redBackground greenBackground');

css:

---

请查找更新的代码，在您的代码中，您使用的是按钮的静态id，因此它将只更新该按钮

您必须将实际单击图标的id传递给javascript函数，函数应该存储该图标第一次单击或之前单击的id。这需要保存在javascript中

注意：代码不是经过测试的，它只是向您提供如何实现它的逻辑

     <div class = "col-md-8 top-a rentListing"> </div>

         function searchLocality() {

       var city = "something";
       var locality = "something";

       $.ajax({
           type: "POST",
           data: {
               city: city,
               locality: locality
           },
           url: "rentlocalityFilter.php",
           success: function(data) {

               var htmlString = '';
               $.each(res['data'], function(key, value) {
                   var id = value.id;
                   htmlString += '<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: green;" id="' + value.id + '" onclick="setColor(' + value.id + ')"></i></a>';

               });
               $('.rentListing').empty().append(htmlString);

           }

       });

   }
   var count = 1;

   var objCount = {};

   function setColor(id) {
       var btn = id;
       var color = '#101010';
       if (objCount && objCount[id] != undefined) {
           if (objCount[id] == 0) {
               objCount[id] = 1;
           } else {
               objCount[id] = 0;
           }
       } else {
           objCount[id] = 1;
       }


       var property = document.getElementById(btn);
       if (objCount[id] == 0) {
           property.style.backgroundColor = "green"
           objCount[id] = 1;
       } else {
           property.style.backgroundColor = "red"
           objCount[id] = 0;
       }
   }

函数searchLocation（）{
var city=“某物”；
var locality=“某物”；
$.ajax({
类型：“POST”，
数据：{
城市:城市,，
地点：地点
},
url:“rentlocalityFilter.php”，
成功：功能（数据）{
var htmlString=''；
$.each（res['data']，函数（键，值）{
var id=value.id；
htmlString+=''；
});
$（'.rentListing'）.empty（）.append（htmlString）；
}
});
}
var计数=1；
var objCount={}；
函数setColor（id）{
var btn=id；
var color='#101010'；
if（objCount&&objCount[id]！=未定义）{
如果（对象计数[id]==0）{
objCount[id]=1；
}否则{
objCount[id]=0；
}
}否则{
objCount[id]=1；
}
var属性=document.getElementById（btn）；
如果（对象计数[id]==0）{
property.style.backgroundColor=“绿色”
objCount[id]=1；
}否则{
property.style.backgroundColor=“红色”
objCount[id]=0；
}
}

您好，如果我没弄错，您想正确切换颜色（红色和绿色之间）？为什么

id=“button”id=“button”

？我猜是打字错误？是的，当点击图标时，图标颜色是绿色意味着我必须做一些事情，假设红色我必须做一些事情看这个答案@Bhavik Patel先生，对不起我编辑了请检查@Stender先生，主要的事情我只需要点击事件，你现在所做的我不想这样，这是一个点击事件，这正在更改您单击的图标的颜色？未捕获的TypeError:无法读取null的属性'style'，我尝试了您的代码，但没有得到答案。请在这一行中共享从ajax请求获取的实际html>htmlString+=''；如果我正在单击图标2，背景色（红色）正在改变，假设相同的图标2再次单击背景色绿色没有发生，请检查@YogeshLet me create fiddle，并使用示例html和javascript代码

.redBackground{background-color:red}

     <div class = "col-md-8 top-a rentListing"> </div>

         function searchLocality() {

       var city = "something";
       var locality = "something";

       $.ajax({
           type: "POST",
           data: {
               city: city,
               locality: locality
           },
           url: "rentlocalityFilter.php",
           success: function(data) {

               var htmlString = '';
               $.each(res['data'], function(key, value) {
                   var id = value.id;
                   htmlString += '<a class="col-md-1 icon" style="margin-top:10px;cursor:pointer" onclick="guesttt_login()"><i class="fa fa-heart" aria-hidden="true" style="margin-top: -11px; color: green;" id="' + value.id + '" onclick="setColor(' + value.id + ')"></i></a>';

               });
               $('.rentListing').empty().append(htmlString);

           }

       });

   }
   var count = 1;

   var objCount = {};

   function setColor(id) {
       var btn = id;
       var color = '#101010';
       if (objCount && objCount[id] != undefined) {
           if (objCount[id] == 0) {
               objCount[id] = 1;
           } else {
               objCount[id] = 0;
           }
       } else {
           objCount[id] = 1;
       }


       var property = document.getElementById(btn);
       if (objCount[id] == 0) {
           property.style.backgroundColor = "green"
           objCount[id] = 1;
       } else {
           property.style.backgroundColor = "red"
           objCount[id] = 0;
       }
   }