javascript - 如何默认隐藏表单并在点击时显示

Question

我有一个评论表单，由 php while 循环显示

Post 1
Comment box 1

Post 2
Comment box 2

我想默认隐藏评论框，当用户点击评论链接时应该显示表单

这是我尝试过的

$(document).ready(function() {

    $("#showActionComment").hide();
    $("#showActionComment").click(function() {
        $("#comForm").show();
    });
});

HTML

php while loop starts here
Post 1
<a href="javascript:void(0);" id="comForm">Comment</a>
<form action="/comment.php" class="form-horizontal" id="showActionComment">
<input type="text" name="comment">
</form>

php while loop ends here

由于循环，可能有 15 个帖子上面的代码在我的情况下不起作用

Answer 1

您正在循环中创建具有相同 id 的元素。 HTML 中的标识符必须是唯一的，否则 HTML 无效。您可以使用类选择器和元素之间的关系来遍历

CSS .showActionComment{ 显示:无;}

用于生成 HTML 的 PHP 脚本

php while loop starts here

    <a href="javascript:void(0);" class="comForm">Comment</a>
    <form action="/comment.php" class="form-horizontal showActionComment">
        <input type="text" name="comment">
    </form>

php while loop ends here

jQuery 脚本，您需要订阅 comForm 元素而不是 form 上的单击事件。在代码片段中我使用了 .next()

Get the immediately following sibling of each element in the set of matched elements.

$(document).on('click',".comForm", function(event) {
    event.preventDefault();
    $(this).next(".showActionComment").show();
});

注意:使用Event Delegation使用.on()动态生成元素时的委托(delegate)事件方法。

一般语法

$(document).on('event','selector',callback_function)