使用动态按钮淡化动态表单

Question

我正在使用 php css mysql 和 js 创建自己的 cms。我已经创造了很多东西并停留在一个地方。这是评论回复。考虑下面的例子。

     这是第 1 条评论 回复按钮

     这是第二条评论 回复按钮

当用户点击回复按钮时，表单应该淡出。

问题是回复按钮和表单取决于评论的数量。

这样 php 和 html 会为表单和按钮提供动态 id。

而且效果很好。 （在 html php css 中一切正常）

但是当涉及到 js 时，手动设置 ids（例如 $("#form1")）可以工作，但是如果动态设置 php 和 html 给出的按钮 ID 和表单 ID（例如 $("#form"+variable)），它不起作用。

对于实时站点，请转到此处。 http://gamerli.tk/cms/cms/post.php?post=1

这是我在 php 中的 while 循环下的表单和按钮。请注意，我给表单的类，即 form-ajax（在 div 内）显示为无，因为最初它不会显示任何内容。

<!-- this form is in while loop of php while runs until all comments on a specific post is completed -->

<-! Php variable comment_id is responsible for dynamic form and button id -->

<button class="btn btn-primary" id="butn-ajax-toggle<?php echo$comment_id; ?>">Reply</button>

        <div class="form-ajax" id="form-ajax<?php echo $comment_id; ?>">

        <form action="rep-submit.php" method="post">

            <div class="form-group">

                <input type="text" name="rep_author" id="rep_author" placeholder="Your Name" class="form-control" required>

                                </div>

                                        <div class="form-group">

                                            <input type="email" name="rep_email" id="rep_email" placeholder="Your Email" class="form-control" required>

                                </div>

                                        <div class="form-group">

                                            <input type="text" name="rep_title" id="rep_title" placeholder="Comment title (optional)" class="form-control">

                                </div>

                                <div class="form-group">

                                        <textarea class="form-control" id="rep_comment" name ="rep_comment"rows="3" placeholder="Your comment" required></textarea>

                                    </div>

                                        <input type="hidden" value="<?php echo$comment_id; ?>" id ="rep_to">

                                        <input type="hidden" value="<?php echo $postp_id; ?>" id ="rep_post_id">

                                   <input id="repsub" type="button" class="btn btn-primary" value="Submit">

                                   </form>

                                        </div>

这是我的 js

// variable count is array having some integers transferred from php code to js and its working

// variable button holds dynamic ids of buttons

// variable form holds dynamic ids of forms

    var btn = [];

    var form = [];

    var limit = count.length - 1;

    for (var i = 0; i <= limit; i++)

    {

        btn[i] = "#butn-ajax-toggle"+count[i];

        form[i] = "#form-ajax"+count[i];

        $(btn[i]).click(function() {

            $(form[i]).css("display", "block");

        if ($(form[i]).css("display") == "none")

        {

            $(form[i]).fadeIn("slow");

            alert("fadein"); // added this to test whether it(if condition)  is working or not

            return false;

        }

        else

        {

            $(form[i]).fadeOut("slow");

            alert("fadeout"); //added this and seems else function is working but no form is fadingout.

            return false;

        }

    });

    }

请帮帮我

Answer 1

使用"on" 动态添加元素。

在按钮事件处理程序中没有定义任何形式。获取下一个表单：

var $nextForm = $(this).next(".form-ajax");

代码：

$(btn[i]).on("click", function() { //Use "on" for dynamic added elements
  var $nextForm = $(this).next(".form-ajax"); //Get next form to button

  if ($nextForm.css("display") === "none" || !$nextForm.css("display")) { 
    $nextForm.fadeIn("slow");
    return false;
  } else {
    $nextForm.fadeOut("slow");
    return false;
  }
});