Question

我在SQL查询中有一个while循环，返回特定comments的所有post page，在同一个循环中我有另一个查询和一个搜索replies的while循环comment并使用LIMIT 1仅返回第一行。我这样做了，所以最初只为reply显示了一个comment，我在第二个循环中添加了另一个查询和一个循环来搜索replies到comment除了这次我使用LIMIT 1,18446744073709551615返回除第一行之外的其他行。我将最后一个查询的结果放在最初隐藏的div中，并在隐藏div之前的第一个查询中触发view all replies。

所以现在我在第一个循环（包含注释）中有一个触发器view all replies。使用javascript我可以在单击触发器时显示和隐藏div。这是它的样子的快照

第一个快照，div隐藏，只显示1个回复。

第二个快照，div可见，trigger的文字已更改

我的问题： 由于我对所有隐藏的div's使用相同的类，因此显示/隐藏其comment的特定replies的触发器适用于所有comments。因此，当我点击view all replies获取第一条评论时，也会显示第二条，第三条等的replies。如何重写我的代码以针对特定注释来显示/隐藏其回复？

的JavaScript

<html>
<head>
<script language="JavaScript">
$(document).ready(function(){
var showText='View all replies';
var hideText='Hide';
// initialise the visibility check
var is_visible = false;
// append show/hide links 
$('.view1').prev().append();
$(".licom").hide(); 
$(".view1").click(function(){
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
$('.licom').toggle(function() {
$(this).closest('view1').find('.licom').hide();
return false;
 },
function() {
$(this).closest("view1").next(".licom").show();
return false;
 });  
    });          
}); 
</script>
</head>
<body>
</body>
</html>

info.php的

  <?php
  ...........
   $stmt = $conn->prepare(
  "SELECT *
  FROM comment
  WHERE post_id = :pid
  ");

$stmt->bindParam(":pid", $type_id, PDO::PARAM_INT);


$stmt->execute();

while($obj = $stmt->fetch()){
     $username = $obj['user_name'];
      $comment = $obj['comment'];
      $id1 = $obj['id'];
      $userimage = $obj['user_image'];
      $row ++;
      $likes = $obj['like1'];
      $dislikes = $obj['dislike'];
  echo '<div class="txt">';
  echo '<div class="comment-container">';
  echo '<div class="comment-item">';
    echo '<div class="comment-avatar">';
      echo '<img src="user/user_images/'.$userimage.'" alt="avatar">';
    echo '</div>';
     echo '<div class="comment-post">';
      echo '<span style="font-weight:bold;">'.$username.'&nbsp&nbspsaid....  
     </span>';
      echo '<p style="margin-left:-11px;">'.$comment.'</p>';
      echo '<input type="hidden" name="comment_id" value="'.$id.'">';
      echo '<form action="" method="post" class="ajaxform"   
           enctype="multipart/form-data">';

       echo '<input type="hidden" name="lkcv[]" value="'.$id.'">';
       echo '<input type="hidden" name="pid" value="'.$type_id.'">';
       echo '<input type="hidden" name="stk" value="'.$likes.'">';
      echo '<input type="image" src="images/like.png" id="lksub" width="15"
          value="som" height="15" style="float:right;position:relative;margin-
             right:290px;"/><div class="ld">'.$likes.'</div>';

      echo '</form>';
      echo '<form action="" method="post"    enctype="multipart/form-data">';
       echo '<input type="hidden" name="lkd_id" value="'.$id.'">';
        echo '<input type="hidden" name="dislike" value="">';
        echo ' <input type= "image" id="submit" src="images/dislike.png" 
              width="15" height="15" style="float:right;position:relative;
              margin-top:-14px;margin-right:230px;"/>
             <div class="ldks">'.$dislikes.'</div>';
             echo '</form>';
             //trigger to hide/show replies
             echo '<span class="view1" style="float:right;margin-top:-15px;">View all replies</span>';
             //
            echo '<span class="SendCopy">Reply</span> ';
            echo '<div class="users">';
           echo '<form action="" method="post"    enctype="multipart/form-
                  data">';
           echo '<textarea rows="4"  name="replycomment" style="float:right;
                  resize: none;margin-top:5px;" cols="50" >';
            echo '</textarea>';
         echo '<input type="hidden" name="comment_id" value="'.$id.'">';
         echo '<input type="submit" name="reply" id="submit" class="post-
                 button" value="Send" />';
         echo '</form>';

          echo '</div>';

         echo '</div>';

          echo '</div>';  

         echo '</div>'; 
        echo '</div>';

 //Relpy to comment, show only the first row
 $rep = $conn->prepare("SELECT  * FROM reply WHERE comment_id = :comid LIMIT 1");
$rep->bindParam(":pid", $id1, PDO::PARAM_INT);


$rep->execute();

while($obj = $rep->fetch()){
    //...........same output as first without the view all replies trigger......

//Relpy to comment, show from 2-
$rep = $conn->prepare("SELECT  * FROM reply WHERE comment_id = :comid LIMIT 1,18446744073709551615");
$rep->bindParam(":pid", $id1, PDO::PARAM_INT);


$rep->execute();

while($obj = $rep->fetch()){
//div to show/hide
echo '<div class="licom">';
 //...........same output as first without the view all replies trigger......

}
  }
     }
 ?>

Answer 1

由于您已经拥有唯一的注释ID，因此可以将其作为ID属性添加到comment-container元素中，类似于：

echo '<div class="comment-container" id="comment-' . $id . '">';

然后，用于切换注释的jQuery（仅在该容器内）看起来像这样：

//When a user clicks "View all replies"...
$('.view1').click(function() {
    //Find the ID of the comment container he/she clicked inside
    var commentID = $(this).closest('.comment-container').attr('id');

    //Use that ID to make the selector more specific when targeting the reply elements
    $('#' + commentID + ' .licom').toggle();
});

换句话说，你的jQuery / CSS选择器只需要更具体。

另外，如果你想为显示/隐藏行为添加一些（微妙的）动画，jQuery的toggle()函数接受几个选项来完成这个：http://api.jquery.com/toggle/

更新

我刚刚意识到你的.licom元素不在我最初假设的.comment-container元素中。所以这里是我的答案的修改版本，允许您保留现有的HTML结构。

除了在id（我的原始答案中的第一行PHP）上输出注释ID作为.comment-container属性外，还需要将其作为类输出到每个{{ 1}}，像这样：

.licom

然后，jQuery看起来像这样：

echo '<div class="licom comment-' . $id . '">';

Answer 2

$（'。licom'）。toggle（）...太宽泛，将选择所有带有'licom'类的元素，无论它们是否在被点击的元素内。试试$（this）.children（'。licom'）代替。

Answer 3

我已将我的触发器更改为唯一

echo'<a href="#" id="licom-'.$id1.'">View all replies</a>';

和我的div类显示/隐藏是唯一的以及组。

echo '<div class="licom licom-'.$cc_id.'">';//$cc_id has the same value as trigger. example $id1=2, $cc_id=2.

现在我的触发器为licom-1，div显示/隐藏为licom licom-1

然后我将我的javascript更改为：

<script language="JavaScript">
$(document).ready(function(){
$('a').click(function(e){
  e.preventDefault();
    var id = $(this).attr('id');
    if($('.'+id).css('display') == 'none')
    {
        $('.'+id).css('display','block');
    }
    else
    {
        $('.'+id).css('display','none');
    }
     return false; // cancel original event to prevent form submitting
       })
   })
  </script>

此javascript仅显示/隐藏具有相同licom值的div，即只有具有相同id的回复才会被该触发器切换。

最后要隐藏所有licom，我添加了css。

  .licom  {
            display:none;
      }

如何在循环中使用相同的类名独立显示/隐藏div

3 个答案:

更新