在 PHP 循环中的表单提交上用 jQuery 替换 div 内容

Question

如果之前没有点击过按钮，我会在 PHP while 循环中输出这个 jQuery 表单，如果有，则只是一个带有值的图像，该功能就像 facebook 一样的按钮，当用户点击按钮时，图标更改，因此不再可单击，并且值增加 1。表单提交有效，但我似乎无法在不影响提要中的所有其他按钮和值的情况下更新提要中的图标图像和值计数……我尝试了 jQuery @987654321 @ 但它会替换提要中的所有 #bumpCont div……

index.php

<div class="images">
<?php
while($row = $result2->fetch_assoc()){
    $path = $row['path'];
    $user = $row['user'];
    $id = $row['id'];
    $desc = $row['desc'];
    $update = $row['update_date'];
    $bump = $row['bump'];
    $timeFirst  = strtotime($date);
    $timeSecond = strtotime($update);
    $timeSecond = $timeSecond + 86400;
    $timer = $timeSecond - $timeFirst;

?>
<?php if(empty($desc)){}else{?><div id="desc"><?php echo $desc;?></div><?php }?>
<img id="pic" src="uploads/<?php echo $path;?>"/>
<div id="userCont">
<div id="user"><a rel="external" href="user_profile.php?user='.$user.'"><?php echo $user;?></a></div>
<div id="timer"><?php echo $timer;?></div>


<?php
if(in_array($path, $mypath)) {
    echo '<div id="bumpCont"><img id="bump" style="height:55px;right:8px;top: 2px;position: relative;" src="../img/bumpg.png"/><span id="bumpCount">'.$bump.'</span></div>';
}else{
    echo '<form method="post" id="bumpF" data-ajax="false">';
    echo '<input name="id" data-ajax="false" id="field_'.$id.'" type="hidden" value="'.$id.'" />';
    echo '<div id="bumpCont"><input type="image" style="height:55px;right:8px;top: 2px;position: relative; " id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm('.$id.');" value="Send" /><span id="bumpCount">'.$bump.'</span></div>';
    echo ' </form>';
 }
?>

</div>

<?php
}
?>

//Submit Form
function SubmitForm(id) {
event.preventDefault();
var name = $('#field_'+id).val();
console.log(name);
$.post("bump.php", {name: name},
function(data) {
$( "#bumpCont" ).replaceWith( '<div id="bumpCont"><img id="bump" style="height:55px;right:8px;top: 2px;position: relative;" src="../img/bumpg.png"/><span id="bumpCount">' + data + '</span></div>' );
}

Bump.php -

$id =  $_POST['name'];
$sessionUser = $_SESSION['userSession'];

// GET USERNAME
$sql = "SELECT * FROM userbase WHERE user_id='$sessionUser'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $myname = $row['username'];
   }

}


$bump = 1;              
$sql = "SELECT * FROM images WHERE id=$id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
      $bump = $row['bump'];
      $path = $row['path'];
      $desc = $row['desc'];
      $post_user = $row['user'];
        $bump++;
    }

}

$bumpC = 0;                 
$sql = "SELECT * FROM bumped WHERE path='$path' AND myname ='$myname'";
$result = $conn->query($sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $bumpC++;
    }

}

echo $bump;

if($bumpC >= 1){

}else{
$sql = "INSERT INTO `bumped` ( `myname`,`path`, `description`, `post_user`) VALUES ( '$myname','$path', '$desc', '$post_user')";

if ($conn->query($sql) === TRUE) {

} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$sql = "UPDATE images SET update_date='$date' WHERE id=$id";

if ($conn->query($sql) === TRUE) {

} else {
echo "Error updating record: " . $conn->error;
}

$sql = "UPDATE images SET bump=$bump WHERE id=$id";

if ($conn->query($sql) === TRUE) {

} else {
echo "Error updating record: " . $conn->error;
}
}

Answer 1

第一眼看到Elements with same ID in loop的问题。

你可以对多个元素使用同一个类。

<div class="bumpCont"><span class="bumpCount">1</span></div>
<div class="bumpCont"><span class="bumpCount">2</span></div>

使用$(this)

根据对特定元素的点击，您可以更改内容。

$('.bumpCount').click(function(){
  $(this).html(parseInt($(this).html) + 1);
});

希望这对您有所帮助。

$('.bumpCount').click(function(){
  $(this).html(parseInt($(this).html()) + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bumpCont"><span class="bumpCount">1</span></div>
<div class="bumpCont"><span class="bumpCount">2</span></div>