jQuery每次選擇第一個元素

Question

HTML：

<div class="vote" id="<?php echo $id; ?>">

jQuery的：

$('.vote').on('click', function() {
    var div = $(".vote").attr('id');
    $.ajax({
        type: "POST",
        url: "vote.php",
        data: {
            id: $(".vote").attr('id')
        },
        success: function(data) {
            alert(div);
        }
    });
});

這行得通， 但 div var始終是第一個元素-並運行兩次（兩個div具有vote類）。

我也使用AJAX顯示結果（具有vote類的div）。

為什么會發生這種情況，我該如何解決？

Answer 1

您需要使用this ，它引用調用了元素的元素。

var div = $(this).attr('id'); //this.id;

當您使用$(".vote").attr('id') ，它將始終返回您的第一個元素的ID。

當您使用id來存儲自定義數據時。 我建議您使用帶data-*前綴的自定義屬性，該屬性可以通過使用.data()獲取

<div class="vote" data-id="<?php echo $id; ?>">

那你可以用

 var id = $(this).data('id');

Answer 2

您需要使用點擊當前上下文元素this ：

var div = this.id;

Answer 3

使用this.id代替$('.vote').attr('id') ，因為如果您使用$('.vote').attr('id') ，則javascript將獲得他找到的第一個ID $('.vote').attr('id')

Answer 4

將您的$（'。vote'）替換為$（this），如下所示：

$('.vote').on('click', function() {
    var div = $(this).attr('id');
    $.ajax({
        type: "POST",
        url: "vote.php",
        data: {
            id: $(this).attr('id')
        },
        success: function(data) {
            alert(div);
        }
    });
});