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

【问题标题】：Change the color of the icon in jquery (django project)更改 jquery 中图标的颜色（django 项目）
【发布时间】：2021-03-14 13:00:53
【问题描述】：

我已添加到产品的愿望清单中。（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");
        }
    });
});

【问题讨论】：

标签： javascript jquery django ajax

【解决方案1】：

您可以使用selector.data("text", "remove") 更改数据属性值的文本。此外，您可以使用$(this)，其中$(this) 指的是a 标签，单击该标签以获取data("text") 的值以及data("id")，然后将其传递给ajax 调用。

演示代码：

$(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>

【讨论】：

tnx 响应