JS：點擊一個div，更改另一個div值

我有一個投票按鈕，我創建它包含在.vote_div中。 2部分：.vote_num爲投票總數，.vote爲投票按鈕。該頁面有一個項目列表，所以我需要確保當用戶點擊.vote，它會改變相應的.vote_num + 1.JS：點擊一個div，更改另一個div值

我的JS函數工作時.vote實際上是總票數，但現在我我分開了兩個。如何抓取.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>

編輯& SOLUTION：

得到它的工作使用$（本）.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>

來源

2011-07-06 Emile

嘗試：

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

它去所點擊的父然後div查找具有類vote_num的元素，然後抓取votes屬性。

@詹姆斯答案應該工作，但這應該給你更多的自由重新排列兩個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/

來源

2011-07-06 18:21:04 Davy8

感謝Davy8，得到了此解決方案以上的解決方案 – Emile

@Emile添加了鏈接到文檔以供進一步閱讀。 – Davy8

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

'票' 不屬於類的投票'，它屬於班'vote_num'

所以行應該是

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

來源

2011-07-06 18:15:23 bitrayne

如果你有多個類票，也許你應該使用每個（）

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

})

來源

2011-07-06 18:15:56 Ibu

假設我理解正確的問題，同時還假設你vote_num元素始終是第一要素在vote_div元素：

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

把這個點擊事件處理程序內將得到來自該votes屬性點擊元素的第一個兄弟元素。

如果您確定有問題的元素被點擊的元素之前將始終是直接可以讓這個更簡單：

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

來源

2011-07-06 18:17:43

您可以將選擇器應用於'siblings（）'，而不是使用'eq（）'。假設結構總是相同的，並且總是隻有一個vote_num元素'siblings（'。vote_num'）'應該工作得很好（不需要'eq（0）'）。或者，如果它返回多個對象，並且只需要第一個，就可以使用'兄弟姐妹'（'。vote_num'）[0]'。 – musicinmyhead

$('.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的屬性選擇，這樣它將符合標準。

來源

2011-07-06 18:28:52

JS：點擊一個div，更改另一個div值

回答

相關問題