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日期函数自动收集日期和时间。然后将每个注释插入具有唯一postID的数据库“comments”中。非常感谢你给我的任何帮助！

     <?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

为每个blogpost提供一个唯一的类，然后使用PHP，您可以在处理完评论后插入一些jQuery来打开pageload上的特定帖子。或者，您可以通过AJAX提交表单，因此无需重新加载，因此用户将完全在表单提交之前的位置。

Answer 3

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

重新加载后重新切换Div

3 个答案:

HTML

码

PHP