<input>ボタンに一意のIDを割り当て、jqueryを使用して読み取ります

Question

基本的にデータベーステーブルから一意の値がロードされる非表示の入力ボタンがあります：<input type="hidden" name="ProductId" class="ProductId" value='.$row["ProductId"].' />このボタンはいくつの行があるかによって繰り返されます

while ($row = $result->fetch()) { 
    echo '<table class="cart-row" cellspacing="0" cellpadding="0" width="100%">'; 
    echo '<tbody>'; 
    echo '<tr>'; 
    echo '<td width="75"><img border="0" width="59px" height="78px" title="" alt="" src=' . $row["ImagePath"] .'></td>'; 
    echo '<td width="203"><span class="itemElements itemName">'. $row["Name"] .'</span></td>'; 
    echo '<td width="203"><input type="submit" class="btnMinus linkbtnType2" value="-"><input type="submit" class="btnPlus linkbtnType2" value="+"></td>'; 
    echo '<td width="135"><span class="qtyNum">('. $row["Qty"] .')</span> <br />'; 
    echo '<input type="hidden" name="ProductId" class="ProductId" value='.$row["ProductId"].' />'; 
    echo '<span class="qtyRemoveLink"><input type="submit" class="btnRemove linkbtn" value="Remove"></td>';        
    echo '<td width="180"><span class="itemElements orderStatus">In Stock Usually dispatched within 24 hours</span></td>'; 
    echo '<td width="175" class="itemPriceRow"><span id="itemPrice">€ '. $row["Price"] .'</span></td>'; 
    echo '</tr>'; 
    echo '</tbody>'; 
    echo '</table>'; 
    echo '<br>';        
} 

イムしかしそれだけで生成された最初の入力ボタンから値を読み出している隠しボタンからこの値を読み取る使用するjQueryの方法を使用してこの方法を介して返されます。私はIDからクラスにボタンを変更しようとしましたが、運がありません。

これは、jQueryのメソッドです：私は考えることができる

$('.btnRemove').click(function() { 
    var productId = $(".ProductId").val(); 
    $.ajax({ 
     type: "POST", 
     url: "functions/deleteCartItem.php", 
     data: "productId="+productId+ "", 
     success: function(msg){ 
      alert(msg); 
     } 
    }) 
}) 

可能な解決策は、彼らは名前でもidでないだけで識別できるように、各ボタンにユニークidを追加することです。しかし、これはjQueryメソッドからそれを読み取る際に問題を提起します。

アイデア？

Answer 1

試してみてください。

var productId = $(this).closest('tr').find(".ProductId").val(); 

thisは、DOM要素として$('.btnRemove')を参照。

jQuery(this).closest("tr") DOMツリーを移動して、最初のtr要素を検索しています。

ここから.ProductIdを検索します。

アンドレアス

Answer 2

あなたが問題を引き起こしているクラスによって参照されているので、それがあることを、あなたの仮定で正しいです。 var productId = $(".ProductId").val();は、すべての.ProductId要素の配列を返します。val()は、最初の値を返します。

$('.btnRemove').click(function() { 
    var productId = $(this).closest("td").find(".ProductId").val(); // amended selector 
    $.ajax({ 
     type: "POST", 
     url: "functions/deleteCartItem.php", 
     data: "productId="+productId+ "", 
     success: function(msg){ 
      alert(msg); 
     } 
    }) 
}) 

Answer 3

あなたが試してみてください：

は、あなたがこのようなクリックイベントを発生させた .btnRemove要素、同じコンテナ内にある .ProductId要素を取得する必要があり、この問題を解決するには

var productId = $(this).closest('tr').find("input[name=ProductId]").val(); 

Answer 4

正しい値が返されません。

var productId = $(this).parent().find(".ProductId").val(); 

または

var productId = $(this).parent().children(".ProductId").val(); 

または

var productId = $(this).prev(".ProductId").val(); 

または

var productId = $(this).siblings(".ProductId").val(); 

フィドル：http://jsfiddle.net/fwM3T/