页面重新加载后重新切换 Div

Question

我正在使用 jQuery 在我创建的博客页面上切换一些隐藏的 DIV。页面上有很多隐藏的 div，每篇博文一个，都是同一个类，每个的内容都是用 PHP 和 MySQL 加载的。每个隐藏的 DIV 都包含一个表单 - 博客帖子的留下评论表单。因此，最初，仅显示博客文章，然后用户单击显示表单的链接以发表评论。提交评论后，页面会重新加载。当页面重新加载时，DIV 再次关闭。我希望该 DIV 保持打开状态（而页面上具有相同课程的所有其他人保持关闭状态）。这是一个说明我在说什么的小提琴：

http://jsfiddle.net/2ZLkz/9/

这是我现在的 jQuery 函数：

        $(document).ready(function () {
           $(".toggleCommentBox").click(function () {
             $(this).next(".showComments").toggle()
           });
        });

提交按钮在小提琴上不起作用，但正如您所见，每个隐藏的 DIV 都有相同的类（它们是使用 PHP while 循环生成的）。按下提交按钮后，页面将重新加载，我想要包含曾经打开的表单的 DIV。所有其他的都应该关闭。

谁能帮我解决这个问题？任何帮助将不胜感激！

编辑：我忘了指出我的表单处理和数据库更新都是用 PHP 完成的。我不确定如何使用 AJAX 来做到这一点。任何人都可以使用 AJAX 方法或最好使用 PHP 作为我的主要编码语言来提供代码吗？

@SarathSprakash - 这是我的 PHP 代码。 filter() 是一个自定义 PHP 函数，用于过滤表单字段中的 HTML 和其他可能有害的输入。评论表单包括名称字段、评论字段，日期和时间是使用php date 函数自动收集的。然后将每个评论插入到具有唯一 postID 的数据库“cmets”中。您能给我的任何帮助将不胜感激！

     <?php 

       if(isset($_POST['submitComment'])) {

         foreach($_POST as $key => $value) {
          $data[$key] = filter($value); 
         }

         $date = date('l') . ", " . date('F') . " " . date('j') . date ('S') . " at " . date('g') . ":" . date('i') . date ('a');

         $sql_insert = "INSERT into `comments` (`postID`, `comment`, `name`, `date`)
          VALUES ('$data[postID]', '$data[commentarea]', '$data[name]', '$date')";

         mysql_query($sql_insert, $adLink) or die("Insertion Failed:" . mysql_error()); 
     } 


     ?>

Answer 1

试试这个，我想这就是你需要的

HTML

<a href="#" class="toggleCommentBox" onclick="return false;">Open 1</a>

<div class="showComments" style="display:none;">
    <form method="post" name="infoForm" action="blah.php">Form fields here
        <br />
        <input type="button" name="submitInfo" value="Submit" class='click' />
    </form>
</div>
<br>
<a href="#" class="toggleCommentBox" onclick="return false;">Open 2</a>

<div class="showComments" style="display:none;">
    <form method="post" name="infoForm" action="blah.php">Form fields here
        <br />
        <input type="button" name="submitInfo" value="Submit" class='click' />
    </form>
</div>
<br> <a href="#" class="toggleCommentBox" onclick="return false;">Open 3</a>

<div class="showComments" style="display:none;">
    <form method="post" name="infoForm" action="blah.php">Form fields here
        <br />
        <input type="button" name="submitInfo" value="Submit" class='click' />
    </form>
</div>
<br>

代码

 $(document).ready(function () {
     $(".toggleCommentBox").click(function () {
         $(this).next(".showComments").toggle();

     });
     $(".click").click(function () {
         var frm = $(this).parent('form');
         $.ajax({
             url: frm.attr('action'),
             type:'POST',
             data:frm.serialize(),
             success: function (response) {
                  // do your code
             },
             error:function(xhr)
             {
                 console.log(xhr);
             }
         });
     });
 });

php

<?php 

         foreach($_POST as $key => $value) {

          if (!is_array($value))
                $data[$key] = filter_var($value);
         }
         $date = date('l') . ", " . date('F') . " " . date('j') . date ('S') . " at " . date('g') . ":" . date('i') . date ('a');

         $sql_insert = "INSERT into `comments` (`postID`, `comment`, `name`, `date`)
           VALUES ('".$data['postID']."', '".$data['commentarea']."', '".$data['name']."', '$date')"

         mysql_query($sql_insert, $adLink) or die("Insertion Failed:" . mysql_error()); 

    echo $data['postID'].",".$data['commentarea'].",".$data['name'].",".$date;
    ?>

希望对你有帮助，谢谢

Answer 2

给每篇博文一个唯一的类，然后在处理完评论后，您可以使用 PHP 插入一些 jQuery 以在页面加载时打开该特定博文。 或者，您可以通过 AJAX 提交表单，因此完全不需要重新加载，因此用户将完全位于提交表单之前的位置。

Answer 3

您可以使用$(this).addClass("active"); 为打开的表单添加类并在页面加载中打开具有“活动”类的表单