DEMO

Question

我有多个输入类型文件。默认情况下，它们是隐藏的，只显示第一个。当用户使用第一个输入文件选择文件时，下面的函数按id显示下一个输入类型文件。问题是它只适用于前2个更改事件，而不是没有错误地停止。如何使它适用于每个下一个输入文件。这是功能：

//first we hide all inputs
$('.imagediv').hide();
$('.imagediv:first').show();
var nextupload=$('.imagediv:first').attr('data');
nextupload=(parseInt(nextupload) + 1);

//this is the event
$(function() {
 $("input:file").change(function (){
   var nextf = $(this).attr('data');
   $('#input'+(nextupload)+'').show();
   alert('#input'+(nextupload)+'');
 });    
});

这是html的样子：

<div class="imagediv" id="input2" data="2">
<input type="file" name="gallery_upload_2" data="gallery_upload_3" id="gallery_upload_2" />
</div>

等下一个输入.. 如何使其适用于每个下一次输入更改？感谢

我在这里制作了jsfiddle：http://jsfiddle.net/Lbu3ksjh/1/

Answer 1

您错过了更改功能中的+1部分：

$('input:file').change(function (){
   var nextupload = $(this).parent('.imagediv').attr('data');
    nextupload = (parseInt(nextupload) + 1);
   $('#input'+(nextupload)+'').show();
   alert('#input'+(nextupload)+'');
 });

我更新了你的小提琴：

<强> Demo

Answer 2

这是另一种解决方案。它适用于可变数量的文件输入，不需要大量代码或标记。

DEMO

<强> JS

$(function() {
    var $fileInputs = $(':file[name*="gallery_"]'), // could be whatever
        next = 0;

    $fileInputs.not(':first').hide();

    $fileInputs.change(function (){
        $fileInputs.eq(++next).show();
    }); 
});

<强> HTML

<input type="file" name="gallery_upload_1" />
<input type="file" name="gallery_upload_2" />
<input type="file" name="gallery_upload_3" />
<input type="text" name="random_text_input" />  
<!-- notice it only reveals file inputs -->
<input type="file" name="gallery_upload_4" />

作为触发器的Jquery输入类型文件不起作用

2 个答案:

DEMO