我有多個輸入類型的文件。默認情況下，它們是隱藏的，只顯示第一個。當用戶使用第一個輸入文件選擇文件時，下面的功能按ID顯示下一個輸入類型文件。問題是，它僅適用於前2個更改事件，並且不會停止而沒有錯誤。我如何使它適用於每個下一個輸入文件。下面是函數：Jquery輸入類型文件作爲觸發器不起作用

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

來源

2014-12-13 Europeuser

$（「輸入：文件」），而不是該使用$（「＃gallery_upload_2」） – 2014-12-13 13:03:39

會出現什麼這個改變？我不會錯過這個事件，它觸發與$（「輸入：文件」），但只有2次:) – Europeuser 2014-12-13 13:06:16

你失蹤的變化，功能+1部分：

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

我更新了你的提琴：

Demo

來源

2014-12-13 13:23:44 empiric

經驗豐富，謝謝，我成功與我這個自我：$（function（）{ $（'。imagediv '）.hide（）; $（'。imagediv：first'）。show（）; $（「input：file」）。change（function（）{ var nextf = $（this）.attr（'數據'）; \t $（'＃input'+（nextf）+''）。next（）。show（）; }）; }）;但斯蒂爾我會投票並接受你的回答，謝謝！ – Europeuser 2014-12-13 13:27:36

謝謝，不客氣。 – empiric 2014-12-13 13:29:11

這是另一種解決方案。它適用於可變數量的文件輸入，不需要大量代碼或標記。

DEMO

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

來源

2014-12-13 13:48:35 Todd

Jquery輸入類型文件作爲觸發器不起作用

回答

DEMO

相關問題