jquery .show 和 .toggle 一键打开和关闭多次答案

【问题标题】：jquery .show and .toggle open and close several times on one clickjquery .show 和 .toggle 一键打开和关闭多次
【发布时间】：2012-03-06 10:35:49
【问题描述】：

我希望我的按钮（我在标记中使用 asp.net 生成许多按钮。）将显示“textboxHidden” div，然后在“响应”和“关闭”之间切换按钮值。如果我再次单击“关闭”按钮，我希望它再次隐藏 div...

实际上，当我单击按钮时，它会多次隐藏和显示 div，然后隐藏“关闭”按钮”。这是为什么呢？

这就是 div：

<div id="buttons">
                        <span class="reply"></span><span class="reply">
                            <input type="button" id="replyButton<%=i %>" value="Respond" onclick="showTextArea('<%=i %>')" />
                        </span>
                    </div>
                    <div id="textboxHidden<%=i %>" style="display: none;">
                        <textarea style="width: 500px; height: 70px;" name="forum_topic_comment<%=i %>" id="forum_topic_comment<%=i %>"></textarea>
                        <div id="hiddenSave<%=i %>" style="display: none;">
                            <input type="button" value="Save" onclick="submitComment('<%=i %>');" />
                        </div>
                    </div>

这就是jquery代码：

function showTextArea(i) {
                $("#replyButton" + i).click(function () {
                    $("#textboxHidden" + i).toggle(200);
                    $("#hiddenSave" + i).show(200);
                    $("#replyButton"+i).val('Close').toggle();

                });
            }

感谢帮助！

【问题讨论】：

标签： jquery

【解决方案1】：

您的showTextArea() 应仅包含以下内容：

$("#textboxHidden" + i).toggle(200);
$("#hiddenSave" + i).show(200);
( $("#replyButton"+i).val() != 'Close' ? $("#replyButton"+i).val('Close') : $("#replyButton"+i).val('Respond') )

见：http://jsfiddle.net/hdfku/2/

【讨论】：

谢谢！有用！。但是当它再次隐藏时，我怎样才能让“关闭”再次变为“响应”？

【解决方案2】：

当然，看看你在做什么。您正在为每个按钮分配一个 onclick 属性。每次单击时，它都会调用函数 showTextArea，每次单击按钮时都会在其中添加一个新的（！）单击处理程序。所有这些单击处理程序都将在下一次单击按钮时运行。每次点击都会获得更多的点击处理程序。

【讨论】：

【解决方案3】：

去掉输入上的onclick，添加一个类“showTextArea”：

<input class="showTextArea" type="button" id="replyButton<%=i %>" value="Respond" />

然后用那个替换你的js：

$(".showTextArea").click(function() {
    i = $(this).attr('id').replace("replyButton","")
    $("#textboxHidden" + i).toggle(200);
    $("#hiddenSave" + i).show(200);
    $("#replyButton"+i).val('Close').toggle();
})

对我来说很好

【讨论】：

当我这样做时，当我点击它时它不会做任何事情。