字体真棒图标不会随着使用 Ajax 的类更改而异步更改

Question

我有一个爱心按钮（用字体真棒图标制作），每次用户点击它时都会改变，但当我点击它时，它只会在我重新加载页面时从全实心变为空。

要更改图标，我使用的方法是在每次点击时更改字体真棒类

负责按钮行为的确切部分

if (previous_action == 'like')
{
    $(event.target).find("i").removeClass("far fa-heart").addClass("fas fa-heart")
}
            
else {
    $(event.target).find("i").removeClass("fas fa-heart").addClass("far fa-heart")
     }

完整代码

$('a.like').on('click', function(event){
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();

    $.post('{% url "posts:post_like" %}',
      {
        id: $(this).data('id'),
        action: $(this).data('action')
      },
      function(data){
        if (data['status'] == 'ok')
        {
            var previous_action = $(event.target).data('action');
            

            // toggle data-action
            $(event.target).data('action', previous_action == 'like' ?
            'unlike' : 'like');

            
            // toggle class to change icon
            if (previous_action == 'like')
            {
                $(event.target).find("i").removeClass("far fa-heart").addClass("fas fa-heart")
            }
            
            else {
                $(event.target).find("i").removeClass("fas fa-heart").addClass("far fa-heart")
            }
            
            
            // update total likes
            var previous_likes = parseInt($(event.target).closest("div").find("span.count .total").text());
            $(event.target).closest("div").find("span.count .total").text(previous_action == 'like' ? previous_likes + 1 : previous_likes - 1);
        }
      }
    );
  });

html 提取

{% for post in posts %}
       <a href="{{ post.get_absolute_url}}" class="text-dark">
            <div class="d-flex bg-white pt-3 pl-2">
                    
    
                <div class=" p-2 mb-2">
                   {% with total_likes=post.users_like.count users_like=post.users_like.all %}
                            
                   <span class="count">
                       <span class="total">{{ total_likes }}</span> like{{ total_likes|pluralize }}
                            
                    </span>

                        
                    <p>
                        <span class="mr-5 ">
                            <a href="" data-id="{{ post.id }}" 
                                    data-action="{% if request.user in users_like %}un{% endif %}like" 
                                    class="like">

                                {% if request.user not in users_like %}
                                    <i class="far fa-heart"></i>
                                {% else %}
                                   <i class="fas fa-heart"></i>
                                {% endif %}
                            </a>
                        </span>
                    </p>
                    {% endwith %}
                </div>
            </div>
        </a>
{% endfor %}

链接提取

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0/css/v4-shims.min.css">

Answer 1

在您当前的代码中，您是否使用过$(event.target)，因此当您单击i 标签时，当前目标将是i 标签并且它没有data-action 属性，这就是您的代码不起作用的原因.相反，您可以检查event.target.tagName 是否为a 标签，使用此标签您可以修改我们的选择器。

演示代码：

$('a.like').on('click', function(event) {
  event.preventDefault();
  event.stopPropagation();
  event.stopImmediatePropagation();
  //your ajax calll..
  //other codes ..
  //check if the event target elemnt is `a` tag or not 
  var target = event.target.tagName.toLowerCase() === 'a' ? $(event.target) : $(event.target).closest("a")
  //use target then..
  var previous_action = target.data('action');
  console.log(previous_action)
  target.data('action', previous_action == 'like' ?
    'unlike' : 'like');
  if (previous_action == 'like') {
    target.find("i").removeClass("fas fa-heart").addClass("far fa-heart")
  } else {
    target.find("i").removeClass("far fa-heart").addClass("fas fa-heart")
  }
  var previous_likes = parseInt($(event.target).closest("div").find("span.count .total").text());
  $(event.target).closest("div").find("span.count .total").text(previous_action == 'like' ? previous_likes + 1 : previous_likes - 1);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0/css/v4-shims.min.css">
<a href="{{ post.get_absolute_url}}" class="text-dark">
  <div class="d-flex bg-white pt-3 pl-2">
    <div class=" p-2 mb-2">
      <span class="count">
         <span class="total">12</span>
      </span>
      <p>
        <span class="mr-5 ">
<a href="" data-id="1" 
   data-action="like" 
   class="like">Like
 <i class="fas fa-heart"></i>
</a>
</span>
      </p>
    </div>
  </div>
</a>
<a href="{{ post.get_absolute_url}}" class="text-dark">
  <div class="d-flex bg-white pt-3 pl-2">
    <div class=" p-2 mb-2">
      <span class="count">
         <span class="total">74</span>
      </span>
      <p>
        <span class="mr-5 ">
<a href="" data-id="2" 
   data-action="unlike" 
   class="like">Unlike
<i class="far fa-heart"></i>
</a>
</span>
      </p>
    </div>
  </div>
</a>