назначить уникальный идентификатор кнопке <input> и прочитать ее с помощью 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>';        
} 

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

Это метод 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 со ссылкой на $('.btnRemove') в DOM элемента.

jQuery(this).closest("tr") Мы путешествуем по дереву DOM, ищем первый элемент tr.

Отсюда мы ищем .ProductId.

Andreas

Answer 2

Вы правильно в своем предположении, что это происходит потому, что вы ссылаетесь на класс, который является причиной проблемы. Ваш var productId = $(".ProductId").val(); вернет массив всех элементов .ProductId, а val() просто вернет значение первого из них.

Чтобы это исправить, нужно, чтобы получить .ProductId элемент, который находится в том же контейнере, в котором .btnRemove элемент, который вызвал событие щелчка, как это:

$('.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

Вы должны попробовать:

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/