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

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

当.vote实际上是总票数时，我的JS函数起作用了，但现在我将两者分开。我怎样才能抓住正确的位置。在右键上投票。点击投票

谢谢

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

$（“.vote”）。单击（函数（）{
var票数=$（this.attr（'票数'）；
美元邮政(
“{%url投票%}”{
“id”：这个，
}，函数（数据）{}）；
this.className=“投票”；
$（this）.text（parseInt（投票）+1）；
返回false；
});
{{host.num_voates}
投票

编辑和解决方案：

使用$（this.parent（）使其正常工作：

$（“.vote”）。单击（函数（）{
var votes=$（this.parent（）.find（'.vote_num'）.attr（'votes'）；
美元邮政(
“{%url投票%}”{
“id”：这个，
}，函数（数据）{}）；
this.className=“投票”；
投票数=parseInt（投票数）+1；
$（this.parent（）.find（'.vote_num'）.text（votes）；
返回false；
});

“投票”不属于“投票”类，它属于“投票”类

所以这条线应该是

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

---

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

---

假设我正确理解了问题，并且假设您的

vote\u num

元素始终是

vote\u div

元素中的第一个元素：

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

将其放入单击事件处理程序中，将从单击元素的第一个同级元素获得

投票

属性

如果您确定相关元素始终位于单击的元素之前，则可以简化此操作：

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

尝试：

它转到单击的

div

的父级，然后查找具有class

vote\u num

的元素，然后获取

votes

属性

@jamesanswer应该可以工作，但这应该会给您更多的自由来重新排列两个div，并添加其他元素，只要它们共享父元素

为了更加健壮，你可以这样做（注意“家长”上的“s”）

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

见：、和

将此脚本放入

$（'document'）.ready（函数（）{..here..}）

我建议将span.vote_num的投票属性更改为数据投票，并同时更改jquery属性选择器，这样它将符合标准。
您可以将选择器应用于
同级（）
，而不是使用
eq（）
。假设结构总是相同的，并且总是只有一个vote_num元素
同级（'.vote_num'）
应该可以正常工作（不需要
eq（0）
）。或者，如果它返回多个对象，而您只需要第一个对象，则可以使用
同级（'.vote_num'）[0]
。
$(".vote").each(function () {
   var current = $(this);
   current.click = function  () {
     // the rest of your function 
   }

})

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

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

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

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

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