Question

我创建的投票按钮包含在.vote_div中。 2部分：.vote_num用于投票总数，和.vote用于投票按钮。该页面有一个项目列表，所以我需要确保当用户点击.vote时，它会更改相应的.vote_num + 1。

当.vote实际上是总投票时，我的JS功能起作用，但现在我正在分离这两个。如何在.vote点击上获取正确的.vote_num？

谢谢！

<script>
$(".vote").click( function() {
    var votes = $(this).attr('votes');
    $.post(
        '{% url vote %}', {
            "id":this.id,
    }, function(data) {});
    this.className = "voted";
    $(this).text(parseInt(votes) + 1);
    return false;
});
</script>


   <div class="vote_div">
    <span class="vote_num" votes='{{host.num_votes}}'>{{host.num_votes}}</span>
    <span class="vote" id="{{host.user.id}}">Vote</span>
   </div>

编辑＆amp;解决方案：

使用$（this）.parent（）：

<script>
$(".vote").click( function() {
    var votes = $(this).parent().find('.vote_num').attr('votes');
    $.post(
        '{% url vote %}', {
            "id":this.id,
    }, function(data) {});
    this.className = "voted";
    votes = parseInt(votes) + 1;
    $(this).parent().find('.vote_num').text(votes);
    return false;
});
</script>

Answer 1

尝试：

var votes = $(this).parent().find('.vote_num').attr('votes');

转到已点击的div的父级，然后查找包含类vote_num的元素，然后抓取votes属性。

@James的答案应该有效，但这样可以让你更自由地重新排列两个div并添加其他元素，只要它们共享父级。

你可以做得更强大（注意“父母”的's'）

var votes = $(this).parents('.vote_div').find('.vote_num').attr('votes');

这将允许元素任意深度嵌套，只要它们只有一个父类，其类为“vote_div”。

请参阅：http://api.jquery.com/parent/，http://api.jquery.com/parents/和http://api.jquery.com/find/

Answer 2

var votes = $(this).attr('votes');

'投票'不属于班级'投票'，它属于班级'vote_num'

所以该行应

var votes = $(".vote_num").attr('votes');

Answer 3

如果你有多个投票类，也许你应该使用每个（）

$(".vote").each(function () {
   var current = $(this);
   current.click = function  () {
     // the rest of your function 
   }

})

Answer 4

假设我已正确理解了这个问题，并假设您的vote_num元素始终是vote_div元素中的第一个元素：

var votes = $(this).siblings().eq(0).attr("votes");

将其置于click事件处理程序中将从所单击元素的第一个兄弟元素中获取votes属性。

如果您确定有问题的元素将始终直接位于单击的元素之前，则可以使这更简单：

var votes = $(this).prev().attr("votes");

Answer 5

$('.vote').click(function(){
    var $vote_num_obj  = $(this).parent().find('.vote_num');
    var new_vote_num   = parseInt($vote_num_obj.attr('votes'))+1;

    $vote_num_obj.attr('votes', new_vote_num);
    $vote_num_obj.html(new_vote_num);
});

将此脚本放在$('document').ready(function(){ ..here.. });

中

我建议将span.vote_num的投票属性更改为数据投票，并更改jquery属性选择器，这样它将符合标准。

JS：单击一个div，更改另一个div值

5 个答案: