JQuery Val函数无法正常工作[重复]答案

【问题标题】：JQuery Val function doesn't work correctly [duplicate]JQuery Val函数无法正常工作[重复]
【发布时间】：2021-12-10 09:08:34
【问题描述】：

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

$(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";
}
?>

【问题讨论】：

良好的代码缩进将帮助我们阅读代码，更重要的是，它将帮助您调试代码Take a quick look at a coding standard 为您自己的利益。您可能会被要求在几周/几个月内修改此代码，最后您会感谢我的。
id 在 dom 中应该是唯一的。如果您有多个帖子，我不知道您在期待什么...
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
Code samples 应该是最小的、完整的和有代表性的。
也是“Jquery effect works on only the first id”的副本，可能还有其他副本。

标签： javascript php html jquery ajax

【解决方案1】：

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

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

有了这个

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

你需要使用 class '.download' 而不是 id '#download'，因为 ids 是一个唯一的选择器，你不能在多个元素中使用相同的 id，它只会返回第一个元素。

【讨论】：