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;
}

提前感谢您的帮助。

亚历

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();
        }
    });
});

演示---> 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

jQuery - 如何在另一个有值时显示元素

3 个答案: