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

Я использую метод 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).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/

Answer 2

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

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

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

try:

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

this, ссылаясь на $('.btnRemove') как элемент DOM.

jQuery(this).closest("tr") мы путешествуем по дереву DOM в поисках первого tr элемента.

Здесь мы ищем .ProductId.

Андреас

Answer 4

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

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