jQuery - 隐藏和显示div

时间:2011-07-09 06:57:24

标签: jquery css forms webforms styling

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

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

感谢您的帮助!

5 个答案:

答案 0 :(得分:1)

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

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

N代表函数的数量(例如showfilehide1

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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/

处的工作示例

答案 3 :(得分:0)

仅使用一个按钮来显示/隐藏其他两个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>

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

答案 4 :(得分:0)

检查出来

<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>
希望它有所帮助。