JQuery Val 函数无法正常工作

Question

我在代码中显示了保存在数据库中的文件，这意味着我使用了一个循环来显示它们，在这个循环中的每个元素中，我都输入了文件名和隐藏类型的输入，它有文件路径作为该输入的值，所以我想显示每个文件的值，但是当我点击任何文件时，警报框会显示保存在数据库中的最后一个文件路径。

$(document).on("click","#download",function(){
var file=$("#displayfilename:input").val();
alert(file);
console.log(file);
});
setInterval(function(){
$.ajax({
url:'loaddivdata.php',
success:function(response){
$(".postsshow").html(response);
}
});
},100);

<?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="#" id="download"><img src="../icons/svg/png/142-mot-2.png" style="width: 30px;"/>'.$filename.'.'.$extensionfile.'<input type="hidden" name="displayfilename" id="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="#" id="download"><img src="../icons/svg/png/140-exceller.png" style="width: 30px;"/>'.$filename.'.'.$extensionfile.'<input type="hidden" name="displayfilename" id="displayfilename" value="'.$filepath.'"></a>'.'<br>';
}elseif( $extensionfile =='pdf' ){
$output .='<a href="#" id="download"><img src="../icons/svg/png/134-pdf.png" style="width: 30px;"/>'.$filename.'.'.$extensionfile.'<input type="hidden" name="displayfilename" id="displayfilename" value="'.$filepath.'"></a>'.'<br>';
}
}
$output.='<hr></div>';
echo $output;            
}
}else{
echo "no posts found";
}
?>

Answer 1

如果我正确理解您的问题，请替换此：

var file= $("#displayfilename:input").val();

用这个

var file= $(this).find("input#displayfilename").val();

您需要使用类".download"而不是id"#download"，因为id是一个唯一的选择器。您不能在多个元素中使用相同的id，它将只返回第一个元素。