php - 如何只刷新用户点击过的div

Question

我想刷新用户点击的div，其中div的id基于从数据库获取的数据的id。

可以说如果用户单击 ID 为 #topic-4 的 div，则应仅在成功执行 ajax 操作后刷新该 div。但我的问题是我不知道如何处理动态生成的 div id

我相信问题出在我的ajax代码中

$('#topic-4').load(location.href + ' #topic-4');

需要记住的一件事是，id topic-4... 是从数据库动态获取的。我还希望将 ajax 代码保留在重复区域之外

我的ajax代码

$(function() {

$(document).on("click", ".first", function(e) {

    e.preventDefault();

    var uid = $(this).data('id');

    $.get('vote.php?id=' + uid, function(html){

        $('#topic-4').load(location.href + ' #topic-4');

         });

});

});

主题是从数据库中获取的，并在 do while php 中重复，如图所示:

<?php do { ?>

<div class="first" id="topic-<?php  $row_topics['id']; ?>">

 <a href="#" data-id="<?php echo $row_topics['id']; ?>" class="btn"> click </a>

</div>

<?php } while ($row_topics = mysqli_fetch_assoc($query_topics));   ?>

结果

<div class="first" id="topic-1">
 <a href="#" data-id="1" class="btn"> click </a>  
</div>

<div class="first" id="topic-2">
 <a href="#" data-id="2" class="btn"> click </a>  
</div>

<div class="first" id="topic-3">
 <a href="#" data-id="3" class="btn"> click </a>  
</div>

...and soon

有什么帮助吗？

Answer 1

试试这个:

$.get('vote.php?id=' + uid, function(html) {
    $.get(location.href + '?' + (new Date()).getTime(), function(response) {
        var newTopic = $(response).find('#topic-' + uid);
        $('#topic-' + uid).html(newTopic.html());
    });
});

location.href + '?' + (new Date()).getTime() 使其重新加载页面，无需任何缓存。

然后，您通过 $(response) 构造一个新的 jQuery 对象并在其中搜索所需的主题。

之后，您可以为当前主题分配新值。

它应该可以在您的 php 代码中不进行任何更改的情况下工作。

<小时/>

为了使其更简单，您必须更改您的 vote.php，以便它仅返回一个新的已投票主题 html，而您可以这样做:

$.get('vote.php?id=' + uid, function(response) {
    $('#topic-' + uid).html(response);
});