Question

在此页面上：http://www.ubhape2.com/formhelp.html

我上传了3个文件。我已经设置了当你点击“添加另一个文件”时它显示下一个文件上传。效果很好。我想稍微调整一下。当您单击添加另一个文件时，下一个显示，并添加“添加另一个文件”图像。文件输入本身仍然只有添加按钮更改为display：none。我不能让这个工作正常。整个文件输入隐藏或隐藏任何内容。

感谢您的帮助！

Answer 1

尝试以这种方式修改showfilehide功能：

function showfilehideN()
{
    document.getElementById('addfileN').style.display='none';
    document.getElementById('filehideN').style.display='block';
}

N代表函数的数量（例如showfilehide1）

Answer 2

为每个标签提供不同的ID，并在标签上单击隐藏相应的标签。

Answer 3

为图片按钮指定一个班级名称。然后你可以做类似下面的通用示例

var x = 'Test<img class="upload" src="http://www.ubhape2.com/images/Icons/addfile.png" /><br>';
$('.upload').live('click', function() {
    $(this).hide();
    $('body').append(x);
})

根据需要进行修改，以便适用于您的网站。

检查http://jsfiddle.net/Qgq8B/

处的工作示例

Answer 4

仅使用一个按钮来显示/隐藏其他两个fileUploads，

JavaScript部分，

             function ShowNextFileUpload()
             {
                var File2=document.getElementById('<%=File2.ClientID%>');
                var File3=document.getElementById('<%=File3.ClientID%>'); 

                if(File2.style.display=="none")
                {
                   File2.style.display="block";
                } 
                else
                {
                   File3.style.display="block";
                }
             }

Aspx部分，

         <asp:FileUpload ID="File1" runat="server" />
         <asp:FileUpload ID="File2" runat="server" style="display:none"/>
         <asp:FileUpload ID="File3" runat="server" style="display:none"/>
         <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="ShowNextFileUpload()">Add Another</asp:LinkButton>

希望这会有所帮助......

Answer 5

检查出来

<input type="button" id="upldBtn" value="Add file" onclick="loadNext();"
 crntNumber="1" />
<div id="divUpld1" style="display:block;"></div>
<div id="divUpld2" style="display:none;"></div>
<div id="divUpld3" style="display:none;"></div>

现在是脚本

<script type="test/javasript">
function loadNext(){
    var crntNumber = $('#upldBtn').attr("crntNumber");
    $("divUpld"+crntNumber).fadeOut(200, function(){
        $("divUpld"+crntNumber).css("display", "none");
        crntNumber++;
        $("divUpld"+crntNumber).fadeIn(200, function(){
              $("divUpld"+crntNumber).css("display", "block");
        });
        $('#upldBtn').attr("crntNumber", crntNumber);
    });
}
</script>

希望它有所帮助。

jQuery - 隐藏和显示div

5 个答案:

检查http://jsfiddle.net/Qgq8B/