Question

我正在尝试为我正在处理的注释系统编写一个简单的删除功能。注释存储在数据库中，其中每个注释都有一个自动递增的cid。我注意到用户只能删除他/她写的第一条评论，但是当用户写两条评论并在第二条评论上按Delete键时，该评论不能被删除，有人可以帮助解决此问题。这是我的代码。谢谢您的帮助。

这是我的meatballs.php文件，在其中加载了注释。

<div class = "page" id = "comments">
  <p class = "style">Comments</p>
  <button class="btn" id="load-comments">See Previous Comments</button><br> 
  <br>

  <?php
     if(isset($_SESSION['u_id'])){
          echo "  <input type = 'hidden' id = 'uid' value = '".$_SESSION['u_uid']."'>
          <input type = 'hidden' id = 'date' value = '".date('Y-m-d H:i:s')."'>
          <textarea id = 'message'></textarea><br>
          <button class = 'btn' type = 'submit' id = 'meatballsSubmit'>Comment</button>";
      }
     else{
          echo "<p>Please log in to comment</p>";}
  ?>

</div><br>
<script>
   $(document).ready(function(){
       $("#load-comments").click(function(){
           document.getElementById('#comments').innerHTML=
               $("#comments").load("getComments.php");
       });
   });
</script>

与getCommetns.php文件一样，该文件从数据库中检索注释。

<?php

include 'includes/dbh.inc.php';
session_start();
$sql = "SELECT * FROM meatballscomments";
$result = mysqli_query($conn, $sql);
while($row = $result->fetch_assoc()){
  echo "<div class = 'comment-box'>";
  echo '<span class = "user">'.$row['user_uid'].'</span><br><br>';
  echo "<p>".htmlspecialchars($row['message'])."</p>";
  echo '<span class = "datef">'.$row['date'].'</span>';

  if(isset($_SESSION['u_id']) && $_SESSION['u_uid'] == $row['user_uid']){
    echo "<br>";
    echo "<input type = 'hidden' id = 'cid' value = '".$row['cid']."'>";
    echo "<button class = 'btn' type = 'submit' id = 'meatballsDelete'>Delete</button>";
    }
   echo "</div><hr>";
   }
?>

<script>
  $(document).ready(function(){
    $("#meatballsDelete").click(function(){
            var cid = $("#cid").val();
            $.ajax({
            url: "deleteComment.php",
            type: "POST",
            async: false,
            data: {
                "cid": cid
            }});
        alert("Your comment has been deleted");
        });
    });
</script>

我的deleteComment.php文件很短，就在这里。

<?php
include 'includes/dbh.inc.php';
$cid = $_POST['cid'];
$sql = "DELETE FROM meatballscomments WHERE cid = '$cid'";
$result = mysqli_query($conn, $sql);

Answer 1

您要在多个html元素上分配相同的id，并在jQuery选择器的结果上使用val()，该选择器将返回第一个ID为cid的元素。来自jQuery：

每个id值在文档中只能使用一次。如果超过一个元素已分配了相同的ID，使用该ID的查询只会选择DOM中的第一个匹配元素。

因此，当您多次使用相同的id时，无法保证它会自动为您获取正确的元素。

最快的解决方法是将#meatballsDelete更改为.meatballsDelete，并将meatballsDelete类添加到您的按钮，这样，单击将在两个按钮上注册。还将$row['cid']值添加为按钮的属性，然后在$(this).attr("myAttribute")中的函数中使用click来获取它，这将始终保证返回的ID属于按钮。

就像@u_mulder在评论中说的那样，您还使用id来注册点击，它也会绑定到具有该ID的第一个元素。

Answer 2

修改代码以解决此问题的一种相当简单的方法是摆脱隐藏的cid输入，并将cid值作为数据值添加到您的按钮。您还需要将按钮更改为具有类meatballsDelete而不是ID，因为id的值必须唯一。所以改变这个：

echo "<input type = 'hidden' id = 'cid' value = '".$row['cid']."'>";
echo "<button class = 'btn' type = 'submit' id = 'meatballsDelete'>Delete</button>";

收件人

echo "<button class = 'btn meatballsDelete' type = 'submit' data-cid = '{$row['cid']}'>Delete</button>";

，然后修改您的JavaScript，将点击处理程序添加到类meatballsDelete（而不是id）中，并从data-cid属性中获取cid值：

$(document).ready(function(){
    $(".meatballsDelete").click(function(){
        var cid = $(this).data('cid');
        $.ajax({
            url: "deleteComment.php",
            type: "POST",
            async: false,
            data: {
                "cid": cid
        }});
        alert("Your comment has been deleted");
    });
});

Answer 3

if(isset($_SESSION['u_id']) && $_SESSION['u_uid'] == $row['user_uid']){
    echo "<br>";
    echo "<p id='demo'></p>";
    $commentId = $row['cid'];
    echo "<input type = 'hidden' id = 'cid' value = '".$row['cid']."'>";
    echo "<button class = 'btn' type = 'submit'  onclick= 'deleteFunction($commentId, 1)'>Delete</button>";
  }

和我使用的脚本

<script>
  function deleteFunction(cid, page){
//document.getElementById("demo").innerHTML = cid + " ----"+ page;
    $.ajax({
      url: "deleteComment.php",
      type: "POST",
      async: false,
      data: {
        "cid": cid,
        "page": page}
    });
    alert("Your comment has been deleted!");
  }
</script>

如何在javascript和ajax中删除评论？

3 个答案: