jQuery val()方法工作异常，点击文件列表仅返回最后一条文件路径

• HTML规范中id属性必须全局唯一，你的PHP循环生成了多个拥有相同id="download"的链接、多个相同id="displayfilename"的隐藏输入框。JS选择器$("#displayfilename")默认只会匹配页面中最后一个符合规则的元素，因此无论点击哪个文件，最终拿到的都是最后一个文件的路径。
• 你设置的100ms定时拉取接口频率过高，容易产生请求堆积，建议根据业务需求调整到合理间隔（如3秒及以上，非实时场景可改为页面加载时仅请求一次）。

1. 修改PHP代码（loaddata.php） #

将循环生成的重复id替换为class，修改所有文件链接的属性：
把原来的<a href="#" id="download">替换为<a href="#" class="download">，把原来的<input type="hidden" name="displayfilename" id="displayfilename" value="'.$filepath.'">替换为<input type="hidden" class="displayfilename" value="'.$filepath.'">。
修改后核心输出逻辑示例：

<?PHP
//loaddata.php
include("../classses/autoload.php");      
$DB=new connection();
$query="select * from posttext order by id desc";
$result=$DB->read($query);
if($result){
    foreach($result as $posts){
        $output='<div class="flex-column">';
        if($posts['file']!=""){
            $extensionfile=pathinfo($posts['file'],PATHINFO_EXTENSION);
            $filename=pathinfo($posts['file'],PATHINFO_FILENAME);
            $filepath=$posts['file'];
            if( $extensionfile=='docx' || $extensionfile=="doc" ||
                $extensionfile=="dot"|| $extensionfile=="dotm" || 
                $extensionfile=="dotx" || $extensionfile=="docm")
            {
                $output .='<a href="#" class="download"><img src="../icons/svg/png/142-mot-2.png" style="width: 30px;"/>'.$filename.'.'.$extensionfile.'<input type="hidden" class="displayfilename" value="'.$filepath.'"></a>'.'<br>';
            }elseif( $extensionfile=="xls" || $extensionfile=="xlsx" || 
                     $extensionfile=="xlt" || $extensionfile=="xlsm"|| 
                     $extensionfile=="xltx" || $extensionfile=="xltm" || 
                     $extensionfile=="xla"|| $extensionfile=="xlam" )
            {
                $output .='<a href="#" class="download"><img src="../icons/svg/png/140-exceller.png" style="width: 30px;"/>'.$filename.'.'.$extensionfile.'<input type="hidden" class="displayfilename" value="'.$filepath.'"></a>'.'<br>';
            }elseif( $extensionfile =='pdf' ){
                $output .='<a href="#" class="download"><img src="../icons/svg/png/134-pdf.png" style="width: 30px;"/>'.$filename.'.'.$extensionfile.'<input type="hidden" class="displayfilename" value="'.$filepath.'"></a>'.'<br>';
            }
        }
        $output.='<hr></div>';
        echo $output;            
    }
}else{
    echo "no posts found";
}
?>

2. 修改JS代码 #

点击事件中改为获取当前点击元素内部的隐藏输入框值：

$(document).on("click",".download",function(){
    var file = $(this).find(".displayfilename").val();
    alert(file);
    console.log(file);
});
// 定时器调整为3秒间隔，可根据实际需求修改
setInterval(function(){
    $.ajax({
        url:'loaddivdata.php',
        success:function(response){
            $(".postsshow").html(response);
        }
    });
},3000);

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