JQuery從多個錨點擊以進行ajax調用

Question

我有這樣的數據庫從php生成的多個錨標簽

<a href="#" id="reply_doc" data-doc_value="1"></a>
<a href="#" id="reply_doc" data-doc_value="2"></a>
<a href="#" id="reply_doc" data-doc_value="3"></a>

現在我得到了JQuery腳本

$(document).ready(function(){
  $("#reply_doc").click(function () {
    var a = $(this).data("doc_value");
    if (a != "") {
        $.ajax({
            type: "POST",
            url: "ajax_check/",
            data: "doc_reply=" + a,
            success: function (b) {
                alert(a+' ok. '+b)
            }
        });
    }
 });
});

這僅適用於第一個錨標記。 如果僅點擊該特定錨點將受影響且該特定值將與ajax一起發送，我如何為每個錨標記執行此操作。

任何幫助將不勝感激。 提前致謝。

Answer 1

id屬性是標識符 。 正如名稱所暗示的那樣，這意味着它必須是唯一的，以便它可以識別單個元素。 為了識別多個元素，您需要使用類來代替：

<a href="#" class="reply_doc" data-doc_value="1"></a>
<a href="#" class="reply_doc" data-doc_value="2"></a>
<a href="#" class="reply_doc" data-doc_value="3"></a>

$(".reply_doc").click(...);

Answer 2

將id更改為class ，並將選擇器更改為".reply_doc" 。

您的html目前無效，因為id屬性應該是唯一的。 雖然當你破壞這個規則時瀏覽器不會上下抱怨，當你嘗試按id選擇一個元素時，它只能找到第一個（或者，在某些瀏覽器中，最后一個）。

假設您無法控制html結構，則可以使用data-doc_value屬性選擇所有錨元素：

$("a[data-doc_value]")...

Answer 3

元素不能具有相同的id，因此在同一個類上綁定事件。

a href="#" class="option" id="reply_doc" data-doc_value="1"></a>
<a href="#" class="option" id="reply_doc" data-doc_value="2"></a>
<a href="#" id="reply_doc" class="option" data-doc_value="3"></a>

JQuery腳本

$(document).ready(function(){
  $(".option").click(function () {
    var a = $(this).data("doc_value");
    if (a != "") {
    $.ajax({
        type: "POST",
        url: "ajax_check/",
        data: "doc_reply=" + a,
        success: function (b) {
            alert(a+' ok. '+b)
        }
    });
}
});
});

Answer 4

再次編輯 DEMO

<a href="#" class="reply_doc" data-doc_value="1">111</a><br>
<a href="#" class="reply_doc" data-doc_value="2">222</a><br>
<a href="#" class="reply_doc" data-doc_value="3">333</a><br>

$(document).ready(function(){
  $(".reply_doc").click(function () {
    var a = $("a.reply_doc").attr("data-doc_value"); //<-- Add this
    if (a != "") {
    $.ajax({
        type: "POST",
        url: "ajax_check/",
        data: "doc_reply=" + a,
        success: function (b) {
            alert(a+' ok. '+b)
        }
    });
  }
 });
});

這樣，每次“ a ”在click上都會包含data-doc_value中的唯一值