У меня есть несколько тегов привязки, сгенерированных 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.

Любая помощь будет оценена по достоинству. заранее спасибо.

1
De. 31 Янв 2013 в 15:23

4 ответа

Лучший ответ

Атрибут 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(...);
3
Anthony Grist 31 Янв 2013 в 11:24

Элементы не могут иметь одинаковый идентификатор, поэтому связывайте событие с одним и тем же классом.

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)
        }
    });
}
});
});
0
Meherzad 31 Янв 2013 в 11:26

Отредактировано снова 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 при нажатии

0
Code Spy 31 Янв 2013 в 11:49

Измените id на class и измените ваш селектор на ".reply_doc".

Ваш html в настоящее время недействителен, потому что атрибут id должен быть уникальным. Хотя браузер не подпрыгивает, когда вы нарушаете это правило, когда вы пытаетесь выбрать элемент с помощью id, он находит только первое (или, в некоторых браузерах, последнее).

Если, гипотетически, у вас нет контроля над структурой html, вы можете вместо этого выбрать все элементы привязки с атрибутом data-doc_value:

$("a[data-doc_value]")...
1
nnnnnn 31 Янв 2013 в 11:29