Question

我有一个评论表格，这是由一个php循环显示

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 {display：none;}

用于生成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()

的代码段中

获取匹配元素集中每个元素的紧随其后的兄弟。

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

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

一般语法

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

Answer 2

为该类设置 display：none 属性。

.form-horizontal{
     display:none
}

每当您刷新页面时，它都不会显示表单在点击事件中，它会根据您的点击事件将显示：无更改为显示：阻止。

Answer 3

默认情况下通过css隐藏表单

#comForm {
display:none;
}

然后点击按钮后显示

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

Answer 4

也许你是这个意思 - 注意ID必须是唯一的：

＆＃13;

$(function() {
  $(".showForm").on("click",function(e) {
    e.preventDefault();
    $(this).next(".showActionComment").toggle();
  });
});

＆＃13;

.showActionComment { display:none }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="enableJavaScript.html" class="showForm">Comment</a>
<form action="/comment.php" class="form-horizontal showActionComment">
<input type="text" name="comment">
</form><br/>
<a href="enableJavaScript.html" class="showForm">Comment</a>
<form action="/comment.php" class="form-horizontal showActionComment">
<input type="text" name="comment">
</form>

＆＃13;

如果您使用AJAX加载评论和链接，请更改

  $(".showForm").on("click",function(e) {

到

  $(document).on("click",".showForm",function(e) {

如何默认隐藏表单并单击显示

4 个答案: