php - jQuery 选项卡 - jquery 脚本仅适用于第一个选项卡 - 初始化错误？

Question

我有 jQuery 选项卡，其中每个选项卡和相应的内容都由 PHP foreach 循环填充。

对于每个选项卡，用户可以上传图片。我以某种方式进行了这样的设置，以便一旦用户选择一个文件，jquery 脚本就会自动开始上传 - 并且浏览按钮被隐藏并替换为“上传您的图片”。

这是代码(CI 标记):

<ul class="tab_header">
    <?php foreach ($p as $row):
        echo '<li>
            <a href="#tabs-'. $row->p_id . '">' . $row->p_name . '</a>
               </li>'; 
        endforeach; ?>
</ul>
<?php foreach ($p as $row): ?>
    <div id="tabs-<?php echo $row->p_id; ?>">

        <?php echo form_open_multipart('/p/p_upload_picture/' . $row->p_id, 'id="upload_form"');
        echo form_upload('userfile', '', 'id="file_select"');
        echo form_hidden('upload','upload');
        echo form_close(); ?>
         <div id="loading" style="display:none;">
            Uploading your picture...
         </div>     
</div>

<?php endforeach; ?>

<script>
$(function(){
    $("#file_select").change(function(){
        $("#upload_form").submit();
        $("#upload_form_div").hide();
        $("#loading").show();
    });
});
</script>   

这非常有效，但仅限于第一个选项卡。

在所有其他选项卡中，jquery 脚本不会运行 - 一旦我选择一个文件，文件名就会显示在浏览按钮字段中，并且不会发生上传(未提交表单)。

我想知道这是否与未为其他选项卡初始化脚本有关。

我该如何解决这个问题？

感谢您的帮助，非常感谢。

Answer 1

您的字段有一个 ID。其中 should be unique per element 。

jQuery 仅返回它遇到的具有给定 id 的第一个元素，这就是您的代码无法正常工作的原因。我建议在您的字段中添加一个类而不是 id。

$('.class-of-field')..change(function() {
    ..
});

以上应该可以完成工作。

这将是没有 jQuery 的等效代码:

var el = document.getElementById('file_select');

它只返回一个元素，看看documentation .