DOM遍歷的AJAX調用遍歷

我試圖用計數器實現Like/Dislike系統。我遇到了AJAX調用問題，更具體地說，當我試圖在將值傳遞給數據庫之後更改視圖中選定元素的HTML時。DOM遍歷的AJAX調用遍歷

有問題的元素是.likeCount，一個有大約十幾個兄弟姐妹的類。如果我簡單地使用選擇器$（'。likeCount'），那麼AJAX調用實際上會成功更新類似計數，但它會爲類的每個實例執行。如果我嘗試使用DOM遍歷（.closest，this，.parent等），直到刷新頁面爲止，類似的count纔會更新。

up and downvote帶有$（'like'）類。

$(document).ready(function() 
{ 

    $('.like').on('click', function(event) 
    { 
    postId = event.target.parentNode.parentNode.dataset['postid']; 
    var isLike = event.target.previousElementSibling == null; 
    $.ajax(
    { 
     method: 'POST', 
     url: urlLike, 
     cache: false, 
     data: {isLike : isLike, postId : postId, _token : token}, 
     success: function() 
     { 
      //first function working great 
      //(changes the like button to a disklike button and visa versa) 

      $.ajax(
      { 
       method: 'POST', 
       url: urlCount, 
       cache: false, 
       data: {postId : postId, _token : token}, 
       dataType: 'json', 
       async: true, 
       success: function(data) 
       { 
        var likeCount = event.target.parentNode.parentNode.childNodes[2].textContent; 
        $('likeCount').html(data["count"]); 
        console.log(data["count"]); 
       } 

      })  
     }  
    })  
})

}）

的執行console.log吐出來的是正確的計數每次。

如何選擇當前有效的likeCount而不會bot my我的AJAX呼叫？

下面是標記：

<div class="row posts"> 
    <div class="col-md-6 col-md-offset-3"> 
     <header><h3>Recent Posts:</h3></header> 
     @foreach($posts as $post) 
      @if (Storage::disk('local')->has($post->user->id . '.jpg')) 
      <div class="col-xs-2"> 
       <img src="{{ route('account.image', ['filename' => $post->user->id . '.jpg']) }}" alt="" class="img-responsive"> 
      </div> 
      @else 
      <div class="col-xs-2"> 
       <img src="default.gif" alt="" class="img-responsive"> 
      </div> 
      @endif 
      <article class="post col-xs-10" id="post" data-postid={{ $post->id }}> 
       <p class="post-body">{{ $post->body }}</p> 
       <div class="info"> 
        Posted by {{ $post->user->name }} on {{ $post->created_at }} 
       </div> 

        <div class="likeCount">{{ $post->likes->where('like', '1')->count() }} other people liked this.</div> 

        <div class="interaction"> 
         <a class="like btn upvote">{{ Auth::user()->likes()->where('post_id', $post->id)->first() ? Auth::user()->likes()->where('post_id', $post->id)->first()->like == 1 ? 'You like this' : 'Like' : 'Like'}}</a> | 
         <a class="like btn downvote">{{ Auth::user()->likes()->where('post_id', $post->id)->first() ? Auth::user()->likes()->where('post_id', $post->id)->first()->like == 0 ? 'You dislike this' : 'Dislike' : 'Dislike'}}</a> 

         @if(Auth::user() == $post->user) 
         | 
         <a href="#" class="edit">Edit</a> | 
         <a href="{{ route('post.delete', ['post_id' => $post->id]) }}">Delete</a> 
         @endif 
        </div> 
      </article> 
     @endforeach 
     <?php echo $posts->links(); ?> 
    </div> 
</div>

來源

2016-08-04 Vault Dweller

你的第二個電話不應該在成功功能？ – sandrooco

不要使用$（'likeCount'），使用$（event.target.parentNode.parentNode.childNodes [1]）或者類似的 – juvian

@Sandesire，謝謝你的錯誤。 –

這裏的問題是不正確的DOM遍歷。

VAR likeCount應該是：當多個單元共享類名

$(event.currentTarget.parentNode.parentNode.childNodes[5]);

使用 '事件' 簡化了操作。

來源

2016-08-05 17:06:31

DOM遍歷的AJAX調用遍歷

回答

相關問題