jQuery onClick事件图标颜色没有变化

Question

例如，在这里我有三个图标（fa fa-heart），通常图标颜色为绿色，我的要求是，如果单击图标2，则背景颜色应更改 red使用OnClick事件。假设我再次单击相同的图标2意味着背景颜色应在 green 中更改，然后单击图标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;
   }
 }

Answer 1

$('.fa-heart').on('click',function(){
    $(this).toggleClass('redBackground');
});

每次单击心脏时，班级都将被切换 - 如果在场，它将被删除。

这可以进一步发展为

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

CSS：

.redBackground{background-color:red}

Answer 2

请查找更新的代码，在您的代码中，您使用的是静态ID，因此它将仅更新。

您必须将实际单击图标的ID传递给JavaScript函数，并且功能应首次单击该图标或之前单击。需要保存在JavaScript

中

NOTE ：未对其进行测试，只是为您提供逻辑如何实现

     <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;
       }
   }