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中的唯一值