PHP jQuery HTML - カスタムHTML属性を取得する

Question

すべての注文をシステムに出力し、すべてのリンクにカスタム属性oid（order-id）を追加するPHPファイルがあります。私は私はこれが

<a href='#' class='completeOrder' oid='8'>Un-completed</a> 

私は何をしたいのは、このリンクがクリックされたときで、チェックボックスを持つフォームを起動得る要素を検査しないときに正しいHTMLを与える

<a href='#' class='completeOrder' oid='$order_id'>$status</a> 

、：私のリンクは次のようになり正しい注文IDの送信ボタンをHTMLで送信します。したがって、フォームと注文IDを別のPHPファイルに送信して処理することができます（この場合、注文ステータスを更新します）。 jQueryのAJAX呼び出しを使用している私は、チェックボックスでフォームを起動するためにやっている

、私はIDを確認するために警告しようとjQueryのOIDを得た場合、正しくそれは...その未定義私に語った：

あなたの関数で利用可能な thisが getCompleteOrderTools thisご希望のリンクのクリックイベントのために参照してくださいしたかったということに異なっているよう

$("body").delegate(".completeOrder", "click", function(event) { 
    event.preventDefault(); 
    getCompleteOrderTools(); 

    $(".content").toggleClass("hidden"); 
    $('div.hidden').fadeIn(800).removeClass('hidden'); 
    $("#notifications-drop").toggleClass('hidden'); 
}); 

function getCompleteOrderTools() { 
    var o_id = $(this).attr('oid'); 
    alert(o_id); 

    $.ajax({ 
     url: "action.php", 
     method: "POST", 
     data: { 
      getCompleteOrderTools: 1, 
      orderId: o_id 
     }, 
     success: function(data) { 
      $(".row").append(data); 
     }, 
    }); 
} 

Answer 1

あなたの主な問題は、あなたが間違ったコンテキストでthisを参照しているということでした。

あなたは2つのオプションがあります：

のいずれかを使用しjQuery(this).attr('oid');

それとも

<a href='#' class='completeOrder' data-oid='$order_id'>$status</a>

jQuery(this).data('oid');

属性 data

使用jqueryの

だから、.attrとあなたのコードは次のようになります。jQueryオブジェクトがあなたの関数に渡されていない

$("body").delegate(".completeOrder", "click", function(event) { 
    event.preventDefault(); 

    var myThis = $(this);//This is the 'this' corresponding to the link clicked 

    getCompleteOrderTools(myThis); 

    $(".content").toggleClass("hidden"); 
    $('div.hidden').fadeIn(800).removeClass('hidden'); 
    $("#notifications-drop").toggleClass('hidden'); 
}); 

function getCompleteOrderTools(myThis) { 

    var o_id = myThis.attr('oid'); 
    alert(o_id); 

    $.ajax({ 
     url: "action.php", 
     method: "POST", 
     data: { 
      getCompleteOrderTools: 1, 
      orderId: o_id 
     }, 
     success: function(data) { 
      $(".row").append(data); 
     }, 
    }); 
} 

Answer 2

。あなたは、次の操作を行う必要があります。

$("body").delegate(".completeOrder", "click", function(event) { 
    event.preventDefault(); 
    getCompleteOrderTools(jQuery(this)); 

    $(".content").toggleClass("hidden"); 
    $('div.hidden').fadeIn(800).removeClass('hidden'); 
    $("#notifications-drop").toggleClass('hidden'); 
}); 

function getCompleteOrderTools(_this) { 
    var o_id = _this.attr('oid'); 
    alert(o_id); 

    $.ajax({ 
     url: "action.php", 
     method: "POST", 
     data: { 
      getCompleteOrderTools: 1, 
      orderId: o_id 
     }, 
     success: function(data) { 
      $(".row").append(data); 
     }, 
    }); 
} 

あなたの関数にjQuery(this)を渡すことによって、あなたは今、あなたのクリックイベントからjQueryオブジェクトへのフルアクセスを持っています。