在 PHP 循環中的表單提交上用 jQuery 替換 div 內容

Question

我有這個 jQuery 表單在 PHP while 循環中輸出，如果該按鈕之前沒有被點擊過，並且只有一個帶有該值的圖像，如果有的話，該功能就像 facebooks 一樣的按鈕，當用戶點擊按鈕時，圖標會改變，所以它的不再可點擊並且值增加 1。表單提交有效，但我似乎無法更新提要中的圖標圖像和值計數而不影響提要中的所有其他按鈕和值......我嘗試了 jQuery replaceWith()但它替換#bumpCont中的所有#bumpCont div...

索引.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>' );
}

凹凸.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的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>