无法使用js隐藏按钮单击上的div

时间:2014-04-16 23:42:11

标签: javascript jquery html asp.net css

我有4个div和4个不同的按钮,我想在按下相应的按钮时隐藏特定的div。

我的asp代码是

<div class="div2">
    <div class="d1" id="one">
        <h3 class="h3">First Division</h3>
        <hr color="black" />
    <p class="text-green">
        //some text

    </p>
        <br />
        <asp:Button class="btn" ID="Button1" runat="server" Text="Click Me to Hide" />
    </div>
    <div class="d1" id="two">
        <h3 class="h3">Second Division</h3>
        <hr color="black" />
    <p class="text-red" >
        //some text
    </p>
        <br />
        <asp:Button class="btn" ID="Button2" runat="server" Text="Click Me to Hide" />
    </div>
    <div class="d1" id="three">
        <h3 class="h3">Thrid Division</h3>
        <hr color="black" />
    <p class="text-blue">
        //some text
    </p>
        <br />
        <asp:Button class="btn" ID="Button3" runat="server" Text="Click Me to Hide" />
    </div>
    <div class="d1" id="four">
        <h3 class="h3">Fourth Division</h3>
        <hr color="black" />
    <p class="text-yellow">
        //some text
    </p>
        <br />
        <asp:Button class="btn" ID="Button4" runat="server" Text="Click Me to Hide" />
    </div>

我的js代码是

$(document).ready(function () {
$("#Button1").click(function () {
    $("#one").hide('slow');
});
$("#Button2").click(function () {
    $("#two").hide('slow');
});
$("#Button3").click(function () {
    $("#three").hide('slow');
});
$("#Button4").click(function () {
    $("#four").hide('slow');
});
});

但按钮点击没有任何结果。这种错误的原因是什么?

3 个答案:

答案 0 :(得分:2)

将ClientIDMode =“Static”添加到您的asp:按钮,如下所示:

<asp:Button ID="Button1" runat="server" ClientIDMode="Static" Text="Button" />

这将使ID保持不变。它会禁用此控件的自动生成的名称。

以下是此参考:http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

工作小提琴..看看下面的链接它工作正常 Fiddle

答案 1 :(得分:0)

确保将e.preventDefault()放在每个错误处理程序中。例如

$("#Button1").click(function (e) {
    e.preventDefault();
    $("#one").hide('slow');
});

如果你不这样做,它会导致asp.net回发,因为这些按钮在表单标签内。和其他用户说的一样,删除runat =&#34; server&#34;,因为这可以改变你的身份。

你甚至不需要asp:按钮,你可以使用html。

<button id="#Button1">Button Label</button>

答案 2 :(得分:0)

只需将您的JQuery更改为:

$(document).ready(function () {
    $('.btn').on('click',function (e) {
        e.preventDefault();
        $(this).closest('.d1').hide('slow');
    });
});