在 PHP 循环内提交表单时将 div 内容替换为 jQuery

Question

如果之前没有点击过按钮，我会在 PHP while 循环中输出这个 jQuery 表单，如果点击过，则只是一张带有值的图像，功能就像 facebook 一样按钮，当用户单击该按钮时，图标会发生变化，因此不再可单击，并且值会增加 1。表单提交有效，但我似乎无法在不影响所有其他按钮的情况下更新提要中的图标图像和值计数，并且提要中的值...我试过 jQuery replaceWith() 但它替换了提要中的所有 #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 的问题。

您可以对多个元素使用相同的 class。

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

在 PHP 循环内提交表单时将 div 内容替换为 jQuery

Replace div contents with jQuery on form submit within PHP loop

javascript

php

jquery

while-loop

replacewith