1

私はこのようなデータベースから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で送信されます。

どんな助けでもありがたいです。前もって感謝します。

4

4 に答える 4

3

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(...);
于 2013-01-31T11:24:31.357 に答える
1

をに変更しid、classセレクターをに変更します".reply_doc"。

id属性は一意である必要があるため、現在htmlは無効です。このルールに違反しても、ブラウザは上下にジャンプして文句を言うことはありませんが、要素を選択しようとするとid、最初の要素（または、一部のブラウザでは最後の要素）しか見つかりません。

仮に、html構造を制御できない場合は、代わりに次のdata-doc_value属性を持つすべてのアンカー要素を選択できます。

$("a[data-doc_value]")...
于 2013-01-31T11:23:58.907 に答える
0

再度編集 デモ

<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に含まれる一意の値を持ちます

于 2013-01-31T11:29:34.817 に答える
0

要素は同じ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)
        }
    });
}
});
});
于 2013-01-31T11:26:51.497 に答える