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

时间:2016-10-09 17:05:41

标签: javascript php jquery while-loop replacewith

我有这个jQuery表单是在PHP循环中输出的,如果按钮之前没有被点击过,只有一个带有值的图像,如果有的话,该功能就像facebook那样按钮,当用户点击按钮时图标更改,因此它不再可点击,值增加1.表单提交有效,但我似乎无法更新Feed中的图标图像和值计数而不影响Feed中的所有其他按钮和值...我试过jQuery {{ 1}}但它取代了Feed中的所有replaceWith() div ...

的index.php

#bumpCont

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

1 个答案:

答案 0 :(得分:1)

首先看一下@Before public void before1() {...} @Before public void before2() {...} @Test public void test1() { //Only before1 runs } @Test public void test2() { //Only before2 runs } 的问题。

你可以为多个元素提供相同的类。

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