Change the color of the icon in jquery (django project)

Question

I added to the wish list for products.(django project) Users click on a heart-shaped icon if they add a product to this list. If a user has already added this product to the list, the heart icon is red, and if this product is not in the user's favorites list, the heart icon is white. I want to change the color of the icon each time I remove or add it to the list. In the code I wrote, this operation is done only once, and if it clicks again at the same time, there will be no change in color.

{% if request.user in product.favourite.all %}
    <a  href="{% url 'home:favourite' product.id %}"
       class="favourite-product fa-btn{{ product.id }}"
       data-id='{{ product.id }}' data-text="remove">
        <i class="fa fa-heart test{{ product.id }}" style="color:red"></i></a>
{% else %}
    <a  href="{% url 'home:favourite' product.id %}"
       class="favourite-product fa-btn{{ product.id }}"
       data-id='{{ product.id }}' data-text="add">
        <i class="fa fa-heart test{{ product.id }}" style="color:#eee;"></i></a>
{% endif %}

# ajax

$(document).on('click', '.favourite-product', function (e) {
    e.preventDefault();
    const likeText = $(`.fa-btn${product_id}`).attr("data-text");
    const trim = $.trim(likeText)
    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        data: {
            'product': product_id
        },
        success: function (response) {
            if (trim === 'add') {
                $(`.test${product_id}`).css({"color": "red"});
            } else {

                $(`.test${product_id}`).css({"color": "#eee"});
            }
        },
        error: function (response) {
            alert("error");
        }
    });
});

score 1 · Accepted Answer · answered Mar 14 '21 at 13:17

You can use selector.data("text", "remove") to change text of data-attr value . Also , you can use $(this) where $(this) refer to a tag which is been clicked to get value of data("text") as well data("id") and then pass same to ajax call.

Demo Code :

$(document).on('click', '.favourite-product', function(e) {

  e.preventDefault();
  var selector = $(this)
  var data_id = $(this).data("id") //to get data attr
  var likeText = $(this).data("text"); //get text
  var trim = $.trim(likeText)
  console.log(data_id + " " + likeText)
  /*$.ajax({
    url: $(this).attr('href'),
    type: 'GET',
    data: {
      'product': data_id //pass data_id
    },
    success: function(response) {*/
  //compare
  if (trim === 'add') {
    //change i colour
    selector.find("i").css({
      "color": "red"
    });
    //change text
    selector.data("text", "remove")
  } else {
    ///same as above
    selector.find("i").css({
      "color": "#eee"
    });
    selector.data("text", "add")
  }
  /* },
    error: function(response) {
      alert("error");
    }
  });*/
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="{% url 'home:favourite' product.id %}" class="favourite-product fa-btn1" data-id='1' data-text="remove">
  <i class="fa fa-heart test1" style="color:red"></i></a>
<a href="{% url 'home:favourite' product.id %}" class="favourite-product fa-btn2" data-id='2' data-text="add">
  <i class="fa fa-heart test2" style="color:#eee"></i></a>

Change the color of the icon in jquery (django project)

1 Answers1

Linked