jQuery - Как показать элемент, когда другой имеет значение

Question

На данный момент у меня есть 3 кнопки загрузки. Я хочу, когда пользователь выбирает файл с первой кнопкой, он показывает следующую кнопку, чтобы позволить им загружать другой файл и так далее.

Я выяснил, как показать имя файла после его выбора, но я не могу понять, как показать следующую кнопку, когда это значение.

Вот скрипку демо: http://jsfiddle.net/swift29/JcG3k/

JQuery

$(function() { 
    $("#vfb-7").change(function(){ 
     var fileName = $(this).val(); 
     $("#filename-7").html(fileName); 
    }); 
}); 
$(function() { 
    $("#vfb-20").change(function(){ 
     var fileName2 = $(this).val(); 
     $("#filename-20").html(fileName2); 
    }); 
}); 
$(function() { 
    $("#vfb-21").change(function(){ 
     var fileName3 = $(this).val(); 
     $("#filename-21").html(fileName3); 
    }); 
}); 

HTML

<ul> 
    <li id="item-vfb-7" class="vfb-item vfb-item-file-upload "> 
    <label class="vfb-desc" for="vfb-7"> 
     File Upload 
    </label> 
    <div class="upload"> 
     <input id="vfb-7" class="vfb-text vfb-large upload {accept:'png|jpe?g|gif'}" type="file" value="" multiple="" name="vfb-7"></input> 
    </div> 
    <span id="filename-7" class="filename"></span> 
</li> 
<li id="item-vfb-20" class="vfb-item vfb-item-file-upload "> 
    <label class="vfb-desc" for="vfb-20"> 
     File Upload 
    </label> 
    <div class="upload"> 
     <input id="vfb-20" class="vfb-text vfb-large upload {accept:'png|jpe?g|gif'}" type="file" value="" multiple="" name="vfb-20"></input> 
    </div> 
    <span id="filename-20" class="filename"></span> 
</li> 
<li id="item-vfb-21" class="vfb-item vfb-item-file-upload "> 
    <label class="vfb-desc" for="vfb-21"> 
     File Upload 
    </label> 
    <div class="upload"> 
     <input id="vfb-21" class="vfb-text vfb-large upload {accept:'png|jpe?g|gif'}" type="file" value="" multiple="" name="vfb-21"></input> 
    </div> 
    <span id="filename-21" class="filename"></span> 
</li> 
</ul> 

CSS

ul{list-style:none;} 

.filename{ 
    display:inline-block; 
    width:100%; 
    margin-top:10px; 
} 

#item-vfb-20, #item-vfb-21{ 
    display:none; 
} 

label.vfb-desc{ 
    background:#1d1101; 
    color:#f19f00; 
    padding:7px 8px; 
    -webkit-border-radius:5px 0 0 5px; 
    border-radius:5px 0 0 5px; 
    z-index:-100; 
    position:absolute; 
    width:40%; 
} 

.vfb-item-file-upload label{ 
    width:50%!important; 
    margin-left:7%!important; 
    -webkit-border-radius:5px!important; 
    border-radius:5px!important; 
    text-align:center; 
    background:#3D2403; 
} 

.upload{ 
    width:55%; 
    padding:2px 0; 
    background:transparent; 
    border:0; 
    -webkit-box-shadow: inset 0px 0px 2px 0px rgba(29, 17, 1, 0.4); 
    box-shadow: inset 0px 0px 2px 0px rgba(29, 17, 1, 0.4); 
    overflow: hidden; 
    margin-left:8%!important; 
    border-radius:5px!important; 
} 

div.upload input { 
    display:block!important; 
    width:100%!important; 
    opacity:0!important; 
    overflow:hidden!important; 
    border-radius:5px!important; 
} 

Заранее за вашу помощь.

Alex

Answer 1

http://jsfiddle.net/JcG3k/2/

$("#vfb-7").change(function() { 
       var fileName = $(this).val(); 
       $("#filename-7").html(fileName); 
       if (fileName != "") $(this).closest('li').next('li').show(); 
      }); 

Answer 2

Как это -

$(function() { 
    $("#vfb-7").change(function() { 
     var fileName = $(this).val(); 
     $("#filename-7").html(fileName); 
     if (filename === "someName") {  
      $(this).closest('li').next('li').show(); 
     } 
    }); 
}); 

Demo --->http://jsfiddle.net/JcG3k/7/

Answer 3

$(function() { 
    $("#vfb-7").on('change', function() { 
     var fileName = this.value; 
     $("#filename-7").html(fileName); 
     if (fileName.length) $("#item-vfb-20").show(); 
    }); 


    $("#vfb-20").on('change', function() { 
     var fileName2 = this.value; 
     $("#filename-20").html(fileName2); 
     if (fileName2.length) $("#item-vfb-21").show(); 
    }); 


    $("#vfb-21").on('change', function() { 
     var fileName3 = this.value; 
     $("#filename-21").html(fileName3); 
    }); 
}); 

FIDDLE