Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery使div值在使用$（this）的位置上下浮动

Javascript 使用jQuery使div值在使用$（this）的位置上下浮动

javascript jquery

Javascript 使用jQuery使div值在使用$（this）的位置上下浮动,javascript,jquery,Javascript,Jquery,我有一个非常好的脚本，允许用户“竖起”评论。该脚本使用jQuery在用户单击“拇指朝上”图像时将其变成绿色。用户还可以通过再次单击图像来“取消竖起”注释，图像将从绿色变为白色。最后，有一个小div，显示“竖起”特定评论的人数 这就是我的问题所在。目前为止，当用户单击或取消单击“拇指朝上”时，包含注释拇指朝上总数的小div不会立即刷新。只有当用户刷新页面时，数字才会更改。我希望div在用户向上翻阅评论时自动上升1个整数（即，使图像变为绿色），在用户取消翻阅评论时自动下降1个整数（即，将图像从绿色变

我有一个非常好的脚本，允许用户“竖起”评论。该脚本使用jQuery在用户单击“拇指朝上”图像时将其变成绿色。用户还可以通过再次单击图像来“取消竖起”注释，图像将从绿色变为白色。最后，有一个小div，显示“竖起”特定评论的人数

这就是我的问题所在。目前为止，当用户单击或取消单击“拇指朝上”时，包含注释拇指朝上总数的小div不会立即刷新。只有当用户刷新页面时，数字才会更改。我希望div在用户向上翻阅评论时自动上升1个整数（即，使图像变为绿色），在用户取消翻阅评论时自动下降1个整数（即，将图像从绿色变为白色）

包含拇指朝上总数的“little div”被称为如下表达式（您可以在第二段代码中看到它的全部用法）：

$total\u票数
我遇到了麻烦，因为我的jQuery使用“$（this）”，我不知道如何引用另一个元素。。。任何关于如何实现这一点的想法都将非常有用

我的JQUERY:

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

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


$（文档）.ready（函数（）{
$（'.thumb a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$img=$（this.find（'img'）；
var$idshow=$（this.attr（“id”）；
如果（$img.hasClass（'thumbsUp'））{
$img.removeClass（'thumbsUp'）；
}否则{
$img.addClass（'thumbsUp'）；
}
$img.attr（'src'，函数{
返回s.indexOf（'thumbs\u up\u green'）>-1？'../images/thumbs\u up.png'
：“../images/thumbs\u up\u green.png”
});
$.get（“thumb\u up\u tip.php？tip\u id=“+$idshow+”&x=“+”）
if（$img.hasClass（'thumbsUp'））{
警惕（“向上”）；
//这就是我希望总票数上升1的地方
}否则{
警惕（“下降”）；
//这就是我想要$total_up选票下降1的地方
}
});
});
这是我的HTML:

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

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

echo”
$p[名字]
（$tip\u city\u store$p[日期\u时间]）
$总票数
$p[小费]

首先，您可以使用
最近的
和
查找
的组合来获取相对于单击按钮的
.upvote\u 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"; ?>");
});



$（'.thumb a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$img=$（this.find（'img'）；
var idshow=this.id；
var$counter=$（this）.closest（'table'）。find（'upvote_count'）；
如果（$img.hasClass（'thumbsUp'））{
$img
.removeClass（'thumbsUp'）
.attr（'src'，'../images/thumbs_up.png'）；
$counter.text（parseInt（$counter.text（），10）-1）；
} 
否则{
$img
.addClass（'thumbsUp'）
.attr（'src'，'../images/thumbs\u up\u green.png'）；
$counter.text（parseInt（$counter.text（），10）+1）；
}
$.get（“thumb_up_tip.php？tip_id=“+idshow+”&x=”）；
});

这个怎么样


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



var upvote=$（'.upvote_count'）；
var upvoteCount=parseInt（upvote.text（））；
if（$img.hasClass（'thumbsUp'））{
警惕（“向上”）；
//这就是我希望总票数上升1的地方
upvoteVount++；
}否则{
警惕（“下降”）；
向上的--；
//这就是我想要$total_up选票下降1的地方
}
html（upvoteCount）；



希望这有帮助。
重复使用
$（“.upvote\u count”）
不是很优化，因为它会迫使jquery再次找到元素。谢谢@Rory，好的，请重新关闭。有时当用户加载页面时，他们已经用拇指浏览了一些评论，在这种情况下，页面加载时图像已经是绿色的。如果没有一个图标已经是绿色的，那么您的代码会做得很好。我该如何编辑it要处理其中一些已经被竖起大拇指的情况吗？@Brandon这种状态应该在你的PHP中得到处理。我认为如果
$upvote\u count>0
，你只需要将
thumbsUp
类添加到
a
元素中。好东西，很高兴能帮助你谢谢-你摇滚，PS，我应该删除关于我的评论吗一开始你没有正常工作来让答案更清晰吗？不，没关系。我认为没有太多的评论协议，只要你没有滥用；）