php - 需要帮助以正确的方式编写代码来创建帖子的 "loadmore"按钮和 "like"按钮

Question

我创建了一个“加载更多”按钮来从数据库加载更多帖子，但是当我为此添加“喜欢”按钮时，如果一次单击“加载更多”按钮，然后单击“喜欢”按钮，like.php文件运行两次并在 Like 表中添加两行。如果我在加载时单击 2 次，那么 like.php 文件会运行 3 次并且...我想知道如何创建一个加载更多按钮并希望该按钮正常工作。

这是我的简单代码:

posts.php:

<div id="comnts2"></div>
<button id="btn2" >load more</button><script>

$(document).ready(function() {

  var comco2 = 2;
  var offset2 = 0;
  $("#btn2").click(function() {
    $.ajax({
        method: "POST",
       url: "ld_comco.php",
        data: { comnco2 : comco2, offset2 : offset2}
      })
      .done(function(msg2) {

          $("#btn2").hide();
        } else {
       $("#comnts2").append(msg2);

      });

    offset2 = offset2 + comco2;
  });
  $("#btn2").trigger("click");
});
</script>

ld_comco.php:

<?php
$comnco2=$_POST['comnco2'];
$offset2=$_POST['offset2'];

$rzp=mysqli_query($conn,"SELECT * FROM `tbl_users_posts` WHERE uid = '$uid' ORDER BY id DESC limit $offset2, $comnco2");

  while($rp=mysqli_fetch_assoc($rzp)){
    $sid=$rz['id'];
    $lik=$rz['lik'];
    echo $sid."<br>";

    /*like*/
    echo'<img class="li_ik1" data-id="'.$sid.'" src="pc3/up.png">'.$lik.' Likes</img>';
?>
    </span>
<?php }?>

<script type="text/javascript">

$(document).ready(function() {
  var uid=<?php echo $uid;?>;

  $(document).on("click", ".li_ik1", function() {
    var psid = $(this).data('id');
      $.ajax({
          method: "POST",
          url: "like.php",
          data: {psid: psid, uid: uid}
        }).done();
  }); 
});
</script>

like.php:

<?php
$id=$_POST['psid'];
$uid=$_POST['uid'];

$Y=mysqli_query($conn,"INSERT INTO `t_plik` (pid,uid) VALUES ('$id','$uid')");
$Q=mysqli_query($conn,"UPDATE `tbl_users_posts` SET lik=lik+1 WHERE id='$id'");
?>

谢谢

Answer 1

我认为问题是，您在全局范围内多次绑定(bind)“喜欢”按钮。每次加载 ld_comco.php 中的内容时您也可以调用$(document).on("click", ".li_ik1", ...)在 $(document).ready block ，这意味着您绑定(bind)了整个文档上的所有“.li_ik1”按钮(但其中一些已经绑定(bind)了)。

我会删除 $(document).ready(...)来自 ld_comco.php 的 block 并将逻辑移至 posts.php在渲染内容之前。另一个积极的方面是您将业务逻辑集中在一个地方。

请记住:您会在 msg2 中收到按钮响应，这就是为什么您不需要过滤 $msg2不再了。但是如果你用 ld_comco.php 中的更多 html 标签包裹你的按钮，您的按钮将处于更深的层次，因此您需要再次使用选择器，就像您对 .on("click", ".li_ik1", ...) 所做的那样.

posts.php

...
var $msg2 = $(msg2);

// Now you bind only the loaded buttons instead of 
// the buttons in the entire document for multiple times
$msg2.on("click", function() {
  var $element = $(this);
  var psid = $element.data('id');
  var uid = $element.data('uid');

  $.ajax({
    method: "POST",
    url: "like.php",
    data: {psid: psid, uid: uid}
  }).done();
});

$("#comnts2").append($msg2);
...

在您的 ld_comco.php 中您需要添加 data-uid="'.$uid.'"并删除 script堵塞。那么你的文件应该如下所示:

<?php
$comnco2=$_POST['comnco2'];
$offset2=$_POST['offset2'];

$rzp=mysqli_query($conn,"SELECT * FROM `tbl_users_posts` WHERE uid = '$uid' ORDER BY id DESC limit $offset2, $comnco2");

while($rp=mysqli_fetch_assoc($rzp)){
  $sid=$rz['id'];
  $lik=$rz['lik'];
  echo $sid."<br>";

  /*like*/
  echo'<img class="li_ik1" data-id="'.$sid.'" data-uid="'.$uid.'" src="pc3/up.png">'.$lik.' Likes</img>';
}
?>