PHP+jQuery实现文件下载计数仅更新显示首行问题排查

核心问题 #

代码的核心错误是重复使用相同ID：HTML规范要求页面内ID必须全局唯一，循环生成列表行时，每行的下载按钮都用了id="dl_file"、计数展示span都用了id="dl_count"，浏览器在通过ID选择元素时只会匹配到页面中第一个符合的元素，所以所有操作都只会作用在第一行。

修改步骤 #

1. 调整Index.php模板代码

把重复的ID替换为Class，保留原有data属性不变：

<tbody>
    <tr>
        <td>'.$i.'</td>
        <td>'.$row["title"].'</td>
        <td>
        <!-- 把id="dl_file"替换为class="dl_file" -->
        <button class="dl_file btn btn-danger btn-sm" data-rid="'.$row['record_id'].'" type="button">
        <i class="fa fa-download"></i></button>
        <!-- 下载计数展示位：把id="dl_count"替换为class="dl_count" -->
        <small><i>Downloads:<span class="dl_count" data-rid="'.$i.'" data-dlid="'.$row['record_id'].'"></span></i></small>
        
        </td>
    </tr>
</tbody>

2. 调整custom.js逻辑

修改元素选择逻辑，点击下载按钮时定位当前行对应的计数元素，仅更新对应位置的数值：

$(document).ready(function(){
    // 页面加载时初始化所有行的下载计数
    $(".dl_count").each(function(){
        var dlid = $(this).attr("data-dlid");
        var $countEl = $(this);
        dl_count(dlid, $countEl);
    });
    load_data(1);
    function load_data(page, query = ''){
        $.ajax({
            url:"function/fetch.php",
            method:"POST",
            data:{page:page, query:query},
            success:function(data){
                if(query == ''){
                    $('#dynamic_content').html('');
                }else{
                    $('#dynamic_content').html(data);
                }
                // 数据渲染完成后重新初始化所有行计数
                $(".dl_count").each(function(){
                    var dlid = $(this).attr("data-dlid");
                    var $countEl = $(this);
                    dl_count(dlid, $countEl);
                });
            }
        });
    }
});

// 下载按钮点击监听：把ID选择器替换为类选择器
$(document).on("click", ".dl_file", function() { 
    var rid = $(this).attr("data-rid");
    // 定位当前按钮同行的计数展示元素
    var $countEl = $(this).siblings("small").find(".dl_count");
    var dlid = $countEl.attr("data-dlid");
    $.ajax({
        url: "function/downloads.php",
        type: "POST",
        data:{
            record_id: rid,
        },
        success: function(result){
            // 仅更新当前行的计数
            dl_count(dlid, $countEl);
            console.log(result);
        }
    });
});

/**************
 * 下载计数统计
 *************/
// 新增$countEl参数，指定需要更新的计数元素
function dl_count(dlid, $countEl){
    $.ajax({
        url: "function/dl_count.php",
        method: "POST",
        data: { dl_count:1,dlid:dlid},
        success: function(data){
            // 仅更新传入的对应元素，不全局匹配
            $countEl.html(data);
        }
    })
}

修改后点击任意行的下载按钮，都会只刷新当前行的计数，所有行的计数也会正常初始化展示。

内容的提问来源于stack exchange，提问作者dabin_tsikin