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

Question

我正在为用户创建一个能够喜欢状态的功能，一旦被喜欢，它就会从竖起大拇指的图标变为“喜欢！”

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

以下是我的代码：

<?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>

我是否必须更改代码的顺序？我到处寻找这个解决方案，但到目前为止，没有运气。请记住，我是javascript的新手。

编辑：

从更多研究来看，我似乎需要以某种方式为表单设置不同的ID。我不确定我需要在哪个字段中添加不同的ID，我已经尝试了所有不同的方式，我能想到并且还没有达到我想要的结果。

新代码编辑：

    <?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 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>

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

<?php
    }
    }
}
}
?>                              

<script>
$(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]');
            likestatus = contactForm.find('button[name=likestatus]');

        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(), likestatus: likestatus.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
    });
});
</script></p><br>                               

Answer 1

很难说出你的问题是什么，但正如我在评论中提到的，你不能拥有多个具有相同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>

您会注意到我删除了<form>标记，因为您在使用AJAX时并不需要它。

<强>的JavaScript

$(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
    });
});

有用的链接：

• jQuery object: to cache or not to cache?
• Difference between jQuery parent(), parents() and closest() functions
• Button type “button” vs. “submit”
• $.ajax shorthand methods