javascript - Jquery onclick事件图标颜色没有改变

Question

例如这里我有三个图标(fa fa-heart)，通常图标颜色为绿色，我的要求是，如果单击图标 2，背景颜色应使用 onclick 事件更改为红色 .再次假设我点击相同的图标 2 意味着背景颜色应该变为 绿色，之后我点击图标 3 意味着背景颜色应该变为红色，我已经尝试过但我无法做到这一点。我得到这样的答案，如果我单击图标 2，图标 1 的颜色会发生变化。如果我单击 icon 3 ， icon 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}