Не удается скрыть div при нажатии кнопки с помощью js

0

У меня есть 4 divs и 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');
});
});

Но ничего не происходит при нажатии кнопки. В чем причина такой ошибки?

  • 0
    Можете ли вы опубликовать свой HTML?
Теги:

3 ответа

2
Лучший ответ

Добавьте ClientIDMode = "Static" в вашу кнопку asp: что-то вроде этого:

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

Это приведет к тому, что идентификатор останется прежним. Он отключает автогенерируемые имена для этого элемента управления.

Вот ссылка на это: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

Рабочая скрипка. Посмотрите ниже ссылку, она работает. Fine Fiddle

Поделиться
0

Просто измените JQuery на это:

$(document).ready(function () {
    $('.btn').on('click',function (e) {
        e.preventDefault();
        $(this).closest('.d1').hide('slow');
    });
});
Поделиться
0

не забудьте включить e.preventDefault() в каждый обработчик ошибок. например

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

если вы этого не сделаете, это приведет к возврату asp.net, поскольку эти кнопки находятся внутри тега формы. и, как сказал другой пользователь, удалите runat = "server", так как это может изменить ваш идентификатор.

вам даже не нужна кнопка asp: для этого, вы можете просто использовать html.

<button id="#Button1">Button Label</button>
Поделиться
  • 0
    и, как сказал другой пользователь, удалите runat = "server", ... что если нужно иметь несколько обратных ссылок?
  • 0
    ему не нужны постбэки для того, что он делает. он просто показывает div если ему нужен постбэк, ему нужен атрибут runat = "server".
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню