jQuery.addClass適用于一切

我有一個使用 jQuery 的喜歡按鈕。喜歡按鈕按預期作業，但是由于我設定它的方式，它會將頁面上的每個圖示更改為心形

代碼：

if (data.liked) {
    updateText(this_, data.likescount, "")
    $(".like-btn").prepend("<i></i>");
    $("i").addClass("fa fa-heart-o liked-heart");  //problem line
} else {
    updateText(this_, data.likescount, "")
    $(".like-btn").prepend("<i></i>");
    $("i").addClass("fa fa-heart-o unliked-heart"); //problem line

從我的用戶立場來看，問題是我將類附加fa fa-heart-o ...到所有i元素。我怎么能把它應用到喜歡按鈕上

完整代碼：

<script>
    $(document).ready(function(){
         function updateText(btn, newCount, verb){
         btn.text(newCount   " "   verb)
     }

     $(".like-btn").click(function(e){
       e.preventDefault()
       var this_ = $(this)
       var likeUrl = this_.attr("data-href")
       var likeCount = parseInt(this_.attr("data-likes")) | 0
       var addLike = likeCount   1
       var removeLike = likeCount - 1
       if (likeUrl){
          $.ajax({
           url: likeUrl,
           method: "GET",
           data: {},
           success: function(data){
             console.log(data)
             var newLikes;
             if (data.liked){
                  updateText(this_, data.likescount, "")
                  $(".like-btn").prepend("<i></i>");
                  $( "i" ).addClass( "fa fa-heart-o liked-heart" );
              } else {
                  updateText(this_, data.likescount, "")
                  $(".like-btn").prepend("<i></i>");   
                  $( "i" ).addClass( "fa fa-heart-o unliked-heart" );    

              }
           }, error: function(error){
             console.log(error)
             console.log("error")
           }
         })
       }       
     })
 })
</script> 

<a class="like-btn" data-href='{{ post.get_api_like_url }}' data-likes="{{ post.likes.count }}" href="{{ post.get_like_url }}"><i class="{% if userliked %}fa fa-heart-o liked-heart{% else %}fa fa-heart-o unliked-heart{% endif %}" aria-hidden="true"></i>{{ post.likes.count }}</a>

uj5u.com熱心網友回復：

當你點擊.like-btn，它包含了i標簽，為什么你再試一次$(".like-btn").prepend("<i></i>");的success？由于您已存盤$(this)在this_變數中，因此您可以i通過this_.find('i')成功方法輕松獲取目標，然后嘗試從選定的i.

uj5u.com熱心網友回復：

您目前正在定位頁面上的每個 '.like-btn' 并且還定位每個<i>. 正如另一個答案中提到的，您可以使用 jQuery 的.find(selector)來定位現有<i>標簽（而不是添加它）并使用removeClass/addClass組合稍微簡化您的代碼

$(document).ready(function() {

    $(".like-btn").click(function(e) {
      e.preventDefault()
      let this_ = $(this)
      let is_liked = this_.find('i').hasClass('fa-heart');
      if (is_liked) {
        this_.find('i').removeClass('fa-heart').addClass('fa-heart-o');
      } else {
        this_.find('i').removeClass('fa-heart-o').addClass('fa-heart');
      }
    })
  }) 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/ xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o "></i> 5</a>
<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o"></i> 9</a>
<a class="like-btn" href="javascript:void(0)"><i class="fa fa-heart-o"></i> 12</a>

標籤：javascript 查询 姜戈

上一篇：如何在models.py中制作裝飾器？

下一篇：對于Django模型中的外鍵，除了models.CASCADE之外，on_delete是否還有其他選項？