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 ”在点击 data-doc_value 中都会包含唯一值

JQuery从多个锚点击以进行ajax调用

4 个答案: