使用 javascript 循环在 php 上单独显示的注释菜单

Question

首先，javascript 并不是那么好，所以我在这里被困了一段时间。将不胜感激任何帮助。

我有一个用 php 构建的评论系统，其中数据库中的每个 cmets 都有一个 ID，我使用 while 循环在页面上显示所有这些。问题是，每个人都有这个 3 点菜单，用户可以在其中编辑、删除、报告等。但我似乎无法让它们单独显示。我只成功地获得了第一个显示，无论我点击什么评论，菜单都只显示在第一个。或者，当我使用 querySelector 时，它会一次全部显示。但我的动机是让每个评论分别显示。这是我的 Lil 新手代码。

if(isset($_POST['allReviews'])){
    $product_id =$_POST['product_id'];
    $sql="SELECT * FROM ratings WHERE product_id='$product_id'";
    $check = mysqli_query($conn,$sql);
if (mysqli_num_rows($check) > 0) {
        $n=0;
        while ($row=mysqli_fetch_array($check)) {
            $n++;
            $product_id = $row["product_id"];
            $rating = $row['comment_rate'];
            $rate_comment =$row['u_comment'];
            $user_id = $row['user_id'];
            $prefix = 'http://'.$_SERVER['SERVER_NAME'].'/Hostels';
            ?>
                <div class="comments">
     <div class="user_pic"><img src="<?=$prefix?>/img/prof.png" alt="user pic"/></div>     
       <img src="<?=$prefix?>/img/unlike_empty.png" class="unlike" alt="thumbs up">
       <img src="<?=$prefix?>/img/like_empty.png" class="like" alt="thumbs up">
       <img src="<?=$prefix?>/img/dots.png" onclick="ShowMenu()" class="my_menu" alt="dots"/>

       <ul id="<?php echo $user_id; ?>" class="comment_menu">
         <li><a class="edit">Edit</a></li>
         <hr style="width:120%;margin-left:-38px;">
         <li><a class="delete">Delete</a></li>
         </ul>
    <div class = "comments_body">
         <?php echo $rate_comment; ?>
     </div>
    </div>
<script>
function ShowMenu() {
           var y=document.querySelectorAll(".comment_menu");
            for(var i = 0, ilen = y.length + 1; i < ilen; i++){
             y[i].style.display = y[i].style.display =="block"? "none":"block";
</script>
    <?php
 }
  }
   }
    }

     ?>

如果您需要我显示完整的代码以及 php while 循环，请告诉我。我会这样做的。提前致谢。

Answer 1

我无法测试代码，但我认为这会起作用。将 $user_id 传递给 javascript 函数以像这样更改显示属性。

<img src="<?=$prefix?>/img/dots.png" onclick="ShowMenu(<?=$user_id?>)" class="my_menu" alt="dots"/>

<script>
function ShowMenu(thisId) {

    var x = document.getElementById(thisId);
    if (x.style.display === "none") {
        // hide already shown menu
        var y=document.querySelectorAll(".comment_menu");
        for(var i = 0, ilen = y.length + 1; i < ilen; i++){
         y[i].style.display = y[i].style.display ==="block"? "none":"block";
        }
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}
</script>

希望这会有所帮助..