更改jquery中图标的颜色（django项目）

Question

我添加到产品的愿望列表中。（django项目）如果用户将一个产品添加到这个列表中，就点击一个心形图标。如果用户已经将此产品添加到列表中，则心图标为红色，如果此产品不在用户收藏夹列表中，则心图标为白色。每次移除或将图标添加到列表中时，我都想更改图标的颜色。在我写的代码中，这个操作只做一次，如果它同时再次点击，颜色不会有任何变化。

{% 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");
        }
    });
});

Answer 1

可以使用selector.data（“text”,“remove”）更改data-atr值的文本。此外，您还可以使用$(this)，其中$(this)引用a标记，单击该标记可获得数据（“text”）以及数据（“id”）的值，然后将其传递给ajax调用。

演示代码：

null

js lang-js prettyprint-override">$(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>