Как применить одно и то же событие к нескольким кнопкам?

0

Я пытаюсь "переключать" информацию, отображаемую после нажатия кнопки. У меня есть несколько кнопок, которые при каждом щелчке нажимают, я хочу либо показать, либо скрыть блок текста.

К сожалению, прямо сейчас, когда я нажимаю одну кнопку, она отображает или скрывает ВСЕ текстовые блоки вместо одного.

Это первый сценарий, который я когда-либо писал самостоятельно, поэтому, пожалуйста, извините меня, если я использую неправильный синтаксис, но это то, что я мог выяснить, было необходимо использовать вместо переключения (поскольку он устарел).

Вот мой сценарий:

<asp:Content ID="Content2" ContentPlaceHolderID="headCustomScriptsCSS" runat="server">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function (e) {
            $('button').click(function () {
                if ($(this).hasClass("clicked")) {
                    $('p').show();
                    $(this).removeClass("clicked");
                } else {
                    $('p').hide();
                    $(this).addClass("clicked");
                }
            });
        });
    </script>
</asp:Content>

Некоторые из моих HTML-кода:

<asp:Content ID="Content3" ContentPlaceHolderID="cpMainContent" runat="server">
    <h1>
        Add a New Application</h1>
    <h3>
        General Description</h3>
    <div>
        <div class="column-left">
            <label for="EnglishShortName">
                English Short Name</label>
        </div>
        <div class="column-center">
            <input type="text" name="EnglishShortName" />
        </div>
        <div class="column-right">
            <button type="button" class="myButton">
                ?</button>
        </div>
        <div class="help">
            <p>
                This is the paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations! </p>
        </div>
    </div>
    <div>
        <div class="column-left">
            <label for="FrenchShortName">
                    French Short Name</label>
        </div>
        <div class="column-center">
            <input type="text" name="FrenchShortName" />
        </div>
    </div>
    <div>
        <div class="column-left">
            <label for="ApplicationCode">
                Application Code</label>
        </div>
        <div class="column-center">
            <input type="text" name="ApplicationCode" /><br />
        </div>
        <div class="column-right">
            <button type="button" class="myButton">
                ?</button>
        </div>
        <div class="help">
            <p>
                This is a paragraph much like the last one.  It is a paragraph to end all paragraphs. You should feel lucky to have seen such a paragraph in your life. Congratulations! </p>
        </div>
    </div>
...

и некоторые из моих CSS:

.column-left
{
    text-align: right;
    float: left;
    width: 30%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
}
.column-right
{
    float: right;
    width: 20%;
}
.column-center
{
    display: inline-block;
    width: 46%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.help
{
    width: 50%;
    margin-left:25%;
    border:1px dotted black;
    text-align:justify;
}

У меня есть еще несколько кнопок, которые отображают и скрывают текст. Мой вопрос: как я могу обработать событие отдельно для каждой кнопки? Нужно ли писать несколько сценариев?

Заранее спасибо!

  • 0
    $('p').show() найдет ВСЕ теги <p> в вашем документе. Если вам нужен только один (или несколько), связанный с фактическим кликом, вам придется сузить область поиска.
  • 0
    $('p') возвращает все p элементов на странице, поэтому $('p').show(); говорит "показать все элементы P на странице". Вы должны сделать некоторый обход дерева DOM.
Показать ещё 1 комментарий
Теги:

2 ответа

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

Когда вы это сделаете:

$('p').show();

Вы получаете все элементы p и показываете их.

Но для того, чтобы сделать то, что вам нужно, вам нужно перейти, чтобы получить правильный элемент помощи.

Быстрый способ исправить ваш код - это просто изменить две строки: 1

$('p').show();

от

$(this).parent().next().show();

2

$('p').hide();

от

$(this).parent().next().hide();

Он будет делать то, что вы хотите.

Поделиться
  • 0
    Удивительно! Как он понимает, на какую кнопку я нажимаю? Я не совсем понимаю логику этого.
  • 0
    Когда вы нажимаете на кнопку, она станет этой кнопкой. После этого вы можете перемещаться по DOM и получать следующую помощь после этой кнопки. Чтобы сделать это, я использовал parent (), чтобы получить отца этой кнопки, после чего я использовал next (), чтобы получить следующего брата, чтобы показать / скрыть. Понял?
1

Попробуй это

DEMO

   $('button').click(function () {
       pParent = $(this).parent().siblings(".help");
        if ($(this).hasClass("clicked")) {
            $('p',pParent).show();
            $(this).removeClass("clicked");
        } else {
            $('p',pParent).hide();
            $(this).addClass("clicked");
        }
    });
Поделиться
  • 0
    Это странно, оно отлично работает в JSFiddle и делает именно то, что я хочу, но это совсем не работает для веб-приложений. Я использую неправильную версию JQuery (1.10.1)? Или это может быть проблемой, потому что мой сайт использует главную страницу?

Ещё вопросы

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