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

我有多个输入类型文件。默认情况下，它们是隐藏的，并且只显示第一个。当用户选择带有第一个输入文件的文件时，下面的函数按id显示下一个输入类型文件。问题是，它仅适用于前两个更改事件，然后停止，不会出现错误。。如何使它适用于下一个输入文件。以下是函数：

//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:

您缺少change函数中的

+1

部分：

//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)+'');
 });    
});

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

我更新了你的小提琴：

---

更改功能中缺少

+1

部分：

//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)+'');
 });    
});

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

我更新了你的小提琴：

---

这里是另一个解决方案。它可以处理数量可变的文件输入，并且不需要大量代码或标记

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" />

---

这是另一个解决方案。它可以处理数量可变的文件输入，并且不需要大量代码或标记

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" />

$（“输入：文件”）而不是使用$（“#gallery_upload_2”）这会有什么变化？我没有错过这个事件，它使用$（“输入：文件”）触发得很好，但是只有2次：）$（“输入：文件”）而不是使用$（“#gallery_upload_2”）这会有什么变化？我没有错过这个事件，它使用$（“输入：文件”）触发得很好，但只有2次：）经验性的，谢谢，我成功地使用了：$（function（）{$（'.imagediv'）.hide（）；$（'.imagediv:first'）.show（）；$（“输入：文件”）.change（function（）{var nextf=$（this.attr（'data'）；$（'#输入'+（nextf）+'.next（）.show（））；）；）；但我还是会投票接受你的答案，谢谢！凭经验，谢谢，我成功了：$（function（）{$（'.imagediv'）.hide（）；$（'.imagediv:first'）.show（）；$（'input:file'）.change（function（）{var nextf=$（this.attr（'data'）；$）（'#input'+（nextf）+'.next（）.show（）；}）；但我还是会投票接受你的答案，谢谢！