jquery - 如何将同一事件应用于多个按钮？

Question

我正在尝试“切换”按钮点击后显示的信息。我有多个按钮，单击每个按钮时，我想显示或隐藏一段文本。

不幸的是，现在当我点击一个按钮时，它会显示或隐藏所有文本 block ，而不是一个。

这是我自己编写的第一个脚本，所以如果我使用了不正确的语法，请原谅，但这是我认为有必要使用而不是切换的脚本(因为它已被弃用)。

这是我的脚本:

<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;
}

我还有多个这样的按钮可以显示和隐藏文本。我的问题是，如何让每个按钮分别处理事件？我需要编写多个脚本吗？

提前致谢!

Answer 1

当你这样做时:

$('p').show();

您正在获取所有 p 元素并显示它们。

但要执行您想要的操作，您需要导航以获取正确的帮助元素。

修复代码的一种快速方法是更改​​两行: 1

$('p').show();

由

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

2

$('p').hide();

通过

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

它会做你想做的。