jQuery sử dụng nhiều nút cùng một lớp để trả về giá trị

Question

Tôi có một danh sách các mục được tạo bởi PHP, mỗi mục trong div của riêng chúng và mỗi mục có một ID duy nhất. Tôi đang cố gắng để phát triển một cuộc gọi AJAX có thể loại bỏ mỗi mục dựa trên ID của họ, tuy nhiên bất cứ khi nào tôi chạy kịch bản dưới đây, nó luôn luôn trả về 0.

<div> 
    Some entry here 
    <button id="0" class="remove">Remove</button> 
</div> 
<div> 
    Another entry here 
    <button id="1" class="remove">Remove</button> 
</div> 
// ... and so on 

<script> 
    $(".remove").click(function() { 
     var id = $(".remove").attr('id'); 
     alert(id); // debug 
     // AJAX call here 
    }); 
</script> 

Trước đây tôi đã cố gắng điều tương tự ngoại trừ cách khác xung quanh - id được trả về bởi PHP nằm trong thuộc tính class và thuộc tính id có giá trị 'remove' và điều này chỉ trả về 0 cho nút đầu tiên. Nút thứ hai không gọi kịch bản jQuery.

Làm cách nào để chuyển ID duy nhất cho cùng một cuộc gọi jQuery?

Answer 1

Hãy thử điều này

$(".remove").click(function() { 
    var id = $(this).attr('id'); // $(this) refers to button that was clicked 
    alert(id); 
}); 

Answer 2

Chỉ cần sử dụng this.id để có được id của phần tử

$(".remove").click(function() { 
 
    alert(this.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    Some entry here 
 
    <button id="0" class="remove">Remove</button> 
 
</div> 
 
<div> 
 
    Another entry here 
 
    <button id="1" class="remove">Remove</button> 
 
</div>

Answer 3

$(".remove").on("click",function() { 
    var id = $(this).attr('id'); 
    console.log(id); 
}); 

Answer 4

Bạn cần phải sử dụng các từ khóa this để tham khảo phần tử được nhấp:

$('.remove').click(function() { 
    var id = this.id; 
    // OR 
    var id = $(this).attr('id'); 
}); 

Answer 5

Tùy chọn vani cho người xem trong tương lai.

1. Chọn tất cả các yếu tố với lớp remove
2. Duyệt qua các yếu tố, gán một handler nhấp chuột
3. Khi được nhấp loại bỏ các yếu tố phụ huynh
4. Đăng nhập id ra cửa sổ Console

(function() { 
 
    "use strict"; 
 
    var buttons = document.getElementsByClassName('remove'); 
 
    for (var i in Object.keys(buttons)) { 
 
     buttons[i].onclick = function() { 
 
      this.parentElement.remove(); 
 
      console.log(this.id); 
 
     }; 
 
    } 
 
})();

<div>Some entry here 
 
    <button id="0" class="remove">Remove</button> 
 
</div> 
 
<div>Another entry here 
 
    <button id="1" class="remove">Remove</button> 
 
</div>