1

我有一个很好的脚本，允许用户“点赞”评论。当用户点击它时，该脚本使用 jQuery 使“竖起大拇指”图像变为绿色。用户还可以通过再次单击图像“取消点赞”评论，图像将从绿色变为白色。最后，有一个小 div 显示“点赞”特定评论的人数。

这就是我的问题所在。截至目前，当用户单击或取消单击“点赞”时，带有评论点赞总数的小 div 不会立即刷新。仅当用户刷新页面时，该数字才会更改。如果用户正在竖起评论（即使图像变为绿色），我希望 div 自动上升 1 个整数，如果用户不竖起大拇指（即将图像从绿色变为绿色），我希望 div 自动上升 1 个整数白色的）。

带有总点赞数的“小 div”被称为这样表示（您可以在第二个代码块中看到完整的使用）：

<div class='upvote_count'>$total_upvotes</div>

我遇到了麻烦，因为我的 jQuery 使用“$(this)”并且我不知道如何引用另一个元素......关于如何实现这一点的任何想法都会非常有帮助。

我的查询：

<script>
$(document).ready(function() {

$('.thumb a').on('click', function(e) {
e.preventDefault();
var $img = $(this).find('img');
var $idshow = $(this).attr("id");

if($img.hasClass('thumbsUp')) {
     $img.removeClass('thumbsUp');
} else {
     $img.addClass('thumbsUp');
}

    $img.attr('src', function(_,s) {
         return s.indexOf('thumbs_up_green') > -1 ? '../images/thumbs_up.png'
                                                  : '../images/thumbs_up_green.png'                                           
    });

    $.get("thumb_up_tip.php?tip_id=" + $idshow + "&x=" + "<?php echo "1"; ?>")  

    if($img.hasClass('thumbsUp')) { 
        alert("up");
        //THIS IS WHERE I WANT <div class='upvote_count'>$total_upvotes</div> TO GO UP 1
    } else {
        alert("down");
        //THIS IS WHERE I WANT <div class='upvote_count'>$total_upvotes</div> TO GO DOWN 1
    }

});

});
</script>

这是我的 HTML：

echo "
<table width='100%' class='box'>
<tr>
<td><span class='item'>$p[first_name] </span><span class='price'>
($tip_city_store$p[date_time])</span></td>
<td align='center' valign='top'><div class='upvote_count'>$total_upvotes</div></td>
</tr>
<tr>
<td width='87%' valign='top'>
<span class='desc'>$p[tip]</span>
</td>
<td width='13%' align='center' valign='top'>
<span class='thumb'>
<a href='#' id = '$p[tip_id]' onClick='thumbTip(this)'>";

if ($upvote_count=="0")
{
    echo "<img src='../images/thumbs_up.png' width='21' scalefit='1'>";
}

if ($upvote_count=="1")
{
    echo "<img src='../images/thumbs_up_green.png' width='21' scalefit='1' 
    class='thumbsUp'>";
}

echo "</a>
</span>
</td>
</tr
</table>";
4

3 回答 3

1 
if($img.hasClass('thumbsUp')) { 
    alert("up");
    $(".upvote_count").html(parseInt($(".upvote_count").html()) + 1));
} else {
    alert("down");
    $(".upvote_count").html(parseInt($(".upvote_count").html()) -1));
}
于 2013-08-07T09:26:55.990 回答
1

首先，您可以使用closest和的组合find来获取.upvote_count相对于单击按钮的元素。

其次，你的逻辑有点缺陷，需要干燥。试试这个：

$('.thumb a').on('click', function(e) {
    e.preventDefault();
    var $img = $(this).find('img');
    var idshow = this.id;
    var $counter = $(this).closest('table').find('.upvote_count');

    if ($img.hasClass('thumbsUp')) {
        $img
            .removeClass('thumbsUp')
            .attr('src', '../images/thumbs_up.png');
        $counter.text(parseInt($counter.text(), 10) - 1);
    } 
    else {
         $img
            .addClass('thumbsUp')
            .attr('src', '../images/thumbs_up_green.png');
        $counter.text(parseInt($counter.text(), 10) + 1);
    }

    $.get("thumb_up_tip.php?tip_id=" + idshow + "&x=<?php echo "1"; ?>");
});
于 2013-08-07T09:27:57.297 回答
1

这个怎么样？

var upvote = $('.upvote_count');
var upvoteCount = parseInt(upvote.text());

if($img.hasClass('thumbsUp')) { 
    alert("up");
    //THIS IS WHERE I WANT <div class='upvote_count'>$total_upvotes</div> TO GO UP 1
    upvoteVount++;
} else {
    alert("down");
    upvoteVount--;
    //THIS IS WHERE I WANT <div class='upvote_count'>$total_upvotes</div> TO GO DOWN 1
}

upvote.html(upvoteCount);

希望这可以帮助。

于 2013-08-07T09:32:00.030 回答