Javascript提交只影响while循环php中的第一个div

我正在为用户创建一个特性，以便用户能够喜欢某个状态，一旦喜欢，它将从一个竖起大拇指的图标变为“喜欢！”

我遇到的问题是，我在一个while循环中使用它，当我喜欢一个状态（比如第二行）时，我会转到另一个状态（比如第三行），它只会在第二行显示“喜欢”的结果。我希望它在单击时在两行上都显示“喜欢”。数据库从不同的行接收正确的信息，我只希望结果也反映在不同的行上

下面是我的代码：

<?php
if(isset($_SESSION['id'])) {

$sql = "SELECT * FROM user_status WHERE (userid = '$statusposterid') AND (statusid = '$statusid') ";
$result0 = mysqli_query($conn, $sql);
if (mysqli_num_rows($result0) > 0) {
    while ($row = mysqli_fetch_array($result0)) {

    $statusid = $row['statusid'];
    $likerid = $_SESSION['id'];

    $sql = "SELECT * FROM user_likes WHERE likerid='$likerid' AND likesid='$statusid'";
    $result = mysqli_query($conn, $sql);
    $alreadylike = mysqli_num_rows($result);
    if (!$alreadylike > 0) {

    $sql3 = "SELECT * FROM user_likes WHERE likesid='$statusid'";
    $result3 = mysqli_query($conn, $sql3);
    $likecount = mysqli_num_rows($result3); 
?>      

    <td style="width: 100px;">  
    <p align="center">
<div id="contact_form">
<form name="likestatus" action="">
  <fieldset>
    <input type="hidden" name="likesid" id="likesid" size="30" value="<?php echo $statusid ?>" class="text-input" />

    <input type="hidden" name="likerid" id="likerid" size="30" value="<?php echo $_SESSION['id']; ?>" class="text-input" />

      <br />

        <button style="width: 100%; border: none; background:none!important; background-color: transparent; cursor: pointer;" type="submit" name="likestatus" class="button" id="submit_btn">
        <i class="fa fa-thumbs-o-up fa-fw ss-large ss-text-grey"></i>
        </button>   

  </fieldset>
</form>

</div>

    <font><?php echo $likecount; ?> likes</font>
    </td>   

<?php
    }
    }
}
}
?>                              

<script>
  $(function() {
    $(".button").click(function() {
      // validate and process form here
    });
  });
</script>


<script>
  $(function() {
    $('.error').hide();
    $(".button").click(function() {
      // validate and process form here

      $('.error').hide();
      var likesid = $("input#likesid").val();
        if (likesid == "") {
        $("label#likesid_error").show();
        $("input#likesid").focus();
        return false;
      }
        var likerid = $("input#likerid").val();
        if (likerid == "") {
        $("label#likerid_error").show();
        $("input#likerid").focus();
        return false;
      }


  var dataString = 'likesid='+ likesid + '&likerid=' + likerid + '&likestatus=' + likestatus;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "simpletest.php",
    data: dataString,
    success: function() {
      $('#contact_form').html("<div id='message'></div>");
      $('#message').html("<h3>Liked!</h3>")
      //.append("<p>We will be in touch soon.</p>")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("");
      });
    }
  });
  return false;   

    });
  });
</script></p>

---

很难判断您的问题是什么，但正如我在评论中提到的那样，不能有多个元素具有相同的ID。首先删除ID（或用类替换它们）

这里有一个模板（未经测试），说明在某种程度上事情应该是怎样的

HTML

<!-- replaced id attribute with class attribute -->
<div class="contact_form">
    <fieldset>
        <!-- removed id attribute -->
        <input type="hidden" name="likesid" size="30" value="<?php echo $statusid ?>" class="text-input" />
        <input type="hidden" name="likerid" size="30" value="<?php echo $_SESSION['id']; ?>" class="text-input" />
        <br />
        <!-- removed id attribute -->
        <!-- replaced type attribute as you are not submitting really -->
        <button style="width: 100%; border: none; background:none!important; background-color: transparent; cursor: pointer;" type="button" name="likestatus" class="button"><i class="fa fa-thumbs-o-up fa-fw ss-large ss-text-grey"></i></button>
    </fieldset>
</div>

有用链接：






您的HTML有效吗？是的，HTML有效。您不能有两个ID相同的元素。这会打乱您的AJAX调用。如何在循环中更改ID？我试图通过在末尾添加来更改id名称，但结果相同。诀窍是不使用id，如我的答案所示。好的，我们正在取得进展，但现在我错过了一个主要方面。如果没有likestatus变量，代码就无法工作。我添加了它，现在帖子将正确的信息发送到数据库，但我不再有结果回显到div中说“喜欢！”。@sicksixstrings用新代码编辑你的问题。我刚刚添加了我正在处理的新代码块with@sicksixstrings您需要将代码放入
//其余部分。这是您以前的
success
处理程序。此外，您不再将联系人表单作为ID，而是作为类。你应该使用
contactForm
，它可以缓存像
contactForm.html（'Liked'）
这样的东西。你是一个传奇，一个英雄，一个救生员。非常感谢您帮助我解决这个问题！它现在工作得完美无缺。
<!-- replaced id attribute with class attribute -->
<div class="contact_form">
    <fieldset>
        <!-- removed id attribute -->
        <input type="hidden" name="likesid" size="30" value="<?php echo $statusid ?>" class="text-input" />
        <input type="hidden" name="likerid" size="30" value="<?php echo $_SESSION['id']; ?>" class="text-input" />
        <br />
        <!-- removed id attribute -->
        <!-- replaced type attribute as you are not submitting really -->
        <button style="width: 100%; border: none; background:none!important; background-color: transparent; cursor: pointer;" type="button" name="likestatus" class="button"><i class="fa fa-thumbs-o-up fa-fw ss-large ss-text-grey"></i></button>
    </fieldset>
</div>

$(function() {
    // get into the habit of caching the elements you will be re-using
    var error = $('.error');

    $('.button').click(function () {
        error.hide();

        // cache all the elements we'll be using
        var contactForm = $(this).closest('.contact_form'),
            likesid = contactForm.find('input[name=likesid]'),
            likerid = contactForm.find('input[name=likerid]');

        if (likesid.val() == '') {
            // ...
            likesid.focus();
            return false;
        } 
        if (likerid.val() == '') {
            // ...
            likesid.focus();
            return false;
        }

        // easier to use object rather than string
        // not sure where likestatus came from so it is ommitted
        var data = { likesid: likesid.val(), likerid: likerid.val() };

        // short-hand method for $.ajax with POST
        $.post('simpletest.php', data, function (res) {
            // the rest
        });

        // no need to do any return false
    });
});