Question

我在使用jQuery脚本进行投票时遇到问题。我有一个“首页”，其中包含来自mysql数据库的帖子列表。在每个帖子上都有一个投票箱可以投票或者投票。

jQuery / ajax脚本：

<script type="text/javascript">
$(document).ready(function() {

    $('.plus-button').click(function(){
        var postid = <?php echo $postloopid; ?>;
        $('.minus-button').removeClass('disliked');    
        $(this).toggleClass('liked');
        alert(postid);

        $.ajax({
            type:"POST",
            url:"php/votesystem.php",
            dataType : 'html',
            data:'act=like&postid='+postid,
            success: function(data){
                $('.plus-button').html(data);
            }
        });
    });
    $('.minus-button').click(function(){
        var postid = $(this).attr('id');
        $('.plus-button').removeClass('liked');    
        $(this).toggleClass('disliked');

        $.ajax({
            type:"POST",
            url:"php/votesystem.php",
            dataType : 'html',
            data:'act=dislike&postid='+postid,
            success: function(data){
                $('.minus-button').html(data);
            }
        });
    });
});
</script>

Votebox.php

<?php
// If postid is from frontpage use $postloopid as $postid
if(isset($postloopid)){
    $postid = $postloopid;
}
$postid = htmlentities($postid, ENT_QUOTES);;

include("connect.php");


//For test purposes
echo $postid;



// If user logged in show votebox
if(isset($_SESSION['username'])){

    $userid = $_SESSION['userid'];

    $sql2 = mysqli_query($connect,"SELECT * FROM posts WHERE id='$postid' AND deleted=0");

    if($sql2){

        $voterow = mysqli_fetch_assoc($sql2);



         $checkupvote = $voterow['upvoters'];

         $checkdownvote = $voterow['downvoters'];

         $checkupvote = explode(" ",$checkupvote);

         $checkdownvote = explode(" ",$checkdownvote);

         if($checkupvote = array_search($userid,$checkupvote) == true){

            echo '<div class="plus-button liked" name="like">+ ' . $voterow['totalupvotes'] . '</div>';

            echo '<div class="minus-button" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';


         }

         elseif($checkdownvote = array_search($userid,$checkdownvote) == true){

            echo '<div class="plus-button" name="like">+ ' . $voterow['totalupvotes'] . '</div>';

            echo '<div class="minus-button disliked" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';


         }

         else{

            echo '<div class="plus-button" name="like">+ ' . $voterow['totalupvotes'] . '</div>';

            echo '<div class="minus-button" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';

         }

    }
    else {
        echo 'No result <br />';

    }

}
else {
    echo 'Cant find user';
}









?>

头版：

<?php
$sql1 = mysqli_query($connect,"SELECT * FROM posts WHERE totalupvotes < $trendmin AND deleted=0 ORDER BY added DESC LIMIT 0,10");
if($sql1){
    while($row = mysqli_fetch_array($sql1)){
        $postloopid = $row['id'];


        ?>
        <div id="postlist">

        <div style="width:400px; font-size:18px; font-weight:bold;">
        <a target="_blank" href="post.php?id=<?php echo $row['id']; ?>"><?php echo $row['title']; ?></a>
        </div><br />
        <article class="slide"><?php echo nl2br($row['post']); ?></article>





        <br />
        <?php include("php/votebox.php"); ?>
        <br />
        by <a style="font-size:18px;" href="profile.php?id=<?php echo $row['submittedby']; ?>"><?php echo $row['submitteduser']; ?></a>
         at <span style="font-size:12px;"><?php echo $row['added']; ?></span><span style="float:right; margin-right: 10px;"><a target="_blank" href="post.php?id=<?php echo $row['id']; ?>#commentfield"><?php echo $row['totalcomments']; ?> comments</a></span>



         </div>


<?php
    }
}
?>

现在的问题是，当我点击投票箱按钮时，我发现我只从while循环中的第一个加载的帖子中获取了postid。我遇到的另一个问题是，我的总票数和票数在列表中的所有帖子中都有变化，而不是具体的帖子。

有什么想法吗？

Answer 1

好吧让我们来看看你的jQuery代码（就像这样的函数）：

将点击处理程序绑定到具有类plus-button

的所有元素

$('.plus-button').click(function(){
    var postid = <?php echo $postloopid; ?>;

从类disliked

的所有元素中删除minus-button类

    $('.minus-button').removeClass('disliked');    
    $(this).toggleClass('liked');
    alert(postid);

    $.ajax({
        type:"POST",
        url:"php/votesystem.php",
        dataType : 'html',
        data:'act=like&postid='+postid,
        success: function(data){

使用类plus-button

设置所有元素的内部html

            $('.plus-button').html(data);
        }
    });
});

你想要什么是将postid作为属性存储在帖子上，然后使用

var postid = $(this).attr('postid')

仅从当前元素中删除不喜欢的类

$(this)
    .parents('{element containing plus and minus button}')
    .find('.minus-button')
        .removeClass('disliked')
;

存储对点击元素的引用

var $this = $(this); // Cool guys do this right in the beginning and use only this variable instead of $(this)

然后在你的ajax成功处理程序中，你只想设置你点击的按钮的html，这样你就可以使用存储在父函数范围内的引用

$this.html(data);

关于无限滚动脚本的编辑

当页面的某些部分是动态的时，您希望使用以下命令将单击处理程序绑定到动态内容的静态父元素：

$("#postsParent").on('click', '.plus-button', function () {/*handler*/})

Answer 2

Javascript代码不在循环中，它不能引用postloopid。或者，如果是，则每次循环都绑定该类的所有按钮，单击它们将运行所有处理程序，增加所有帖子。

您应该将帖子ID作为数据字段放在按钮中，然后从Javascript中访问它：

echo '<div class="plus-button liked" data-postid="'+$postid+'" name="like">+ ' . $voterow['totalupvotes'] . '</div>';

echo '<div class="minus-button" data-postid="'+$postid+'" name="dislike">- ' . $voterow['totaldownvotes'] . '</div>';

然后您的Javascript可以执行：

$('.plus-button').click(function(){
    var postid = $(this).data('postid');
    $(this).siblings('.minus-button').removeClass('disliked');    
    $(this).toggleClass('liked');
    alert(postid);

    $.ajax({
        type:"POST",
        url:"php/votesystem.php",
        dataType : 'html',
        data:'act=like&postid='+postid,
        context: this,
        success: function(data){
            $(this).html(data);
        }
    });
});

我对JS进行了以下更改：

使用$(this).data('postid')获取postid。
仅从兄弟减号按钮中删除disliked类，而不是从页面上的所有减号按钮中删除。
将返回的HTML放在此元素中，而不是放在所有加号按钮中。我在this参数中传递context:，以便success函数可以引用它。

在php while循环中使用jQuery函数

2 个答案: