Question

我正在尝试＆＃34;切换＆＃34;按钮点击后显示的信息。我有多个按钮，当每个按钮被点击时，我想要显示或隐藏一个文本块。

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

这是我自己编写的第一个脚本，所以如果我使用的语法不正确，请原谅我，但这是我能想到的，而不是切换（因为它已被弃用）。 / p>

这是我的剧本：

<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

试试这个

<强> 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");
        }
    });

Answer 2

执行此操作时：

$('p').show();

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

但要做你想做的事，你需要导航以获得正确的帮助元素。

修复代码的快速方法只需更改两行： 1

$('p').show();

通过

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

2

$('p').hide();

通过

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

它会做你想做的事。

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

2 个答案: