DOM Traversal搞砸了AJAX调用

AJAX call botched by DOM Traversal

本文关键字:AJAX 调用 Traversal DOM      更新时间:2023-09-26

我正试图用计数器实现Like/Dislike系统。我的AJAX调用有问题,更具体地说,当我试图在向DB传递值后更改视图中所选元素的HTML时。

有问题的元素是.likeCount,一个大约有十几个兄弟姐妹的类。如果我只是简单地使用选择器$('.likeCount'(,AJAX调用实际上会成功地更新同类计数,但它会对类的每个实例都这样做。如果我尝试使用DOM遍历(最接近、this、parent等(,则在刷新页面之前,类似计数不会更新。

赞成票和反对票有一个$(类似(类。

$(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每次都会吐出正确的计数。

如何在不破坏AJAX调用的情况下选择当前活动的likeCount?

这是标记:

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

这里的问题是DOM Traversal不正确。

var likeCount应为:

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

当多个元素共享一个类名时,使用"event"可以简化操作。