Question

我想在点击“有用”class="count"时更新跨度中span class="upvote"的文字。我使用ajax更新数据库中的值，然后使用结果显示在计数范围内。

然而，我的代码在下面会更新所有代码。

我有以下html

<div class="question">  
    <span class="upvote" data-id="1" data-cat="question"> Helpful <span class="count">2</span></span>   
</div>

<div class="answers">   
    <span class="upvote" data-id="3" data-cat="answer"> Helpful <span class="count">15</span></span>
    <span class="upvote" data-id="4" data-cat="answer"> Helpful <span class="count">66</span></span>
    <span class="upvote" data-id="6" data-cat="answer"> Helpful <span class="count">0</span></span> 
</div>

这是我的jquery

$('.upvote').click(function(event) {                
    $.ajax({
        url: 'http://localhost/ask/upvote',
        type: 'POST',
        data: {
            cat_id: $(this).data('id'),
            category: $(this).data('cat'),
        },
        dataType: 'json',
        success: function(json) {               
            $(".upvote span").text(json);
        }
    });

    event.preventDefault();
});

Answer 1

您可以保存点击的upvote的引用

$('.upvote').click(function(event) {                
    let $clicked = $(this);  //reference saved
    $.ajax({
        url: 'http://localhost/ask/upvote',
        type: 'POST',
        data: {
            cat_id: $(this).data('id'),
            category: $(this).data('cat'),
        },
        dataType: 'json',
        success: function(json) {               
            $clicked.find( ".count" ).text(json); //observe changes in this line
        }
    });

    event.preventDefault();
});

如何更新重复列表中的特定范围文本？

1 个答案: