javascript - Jquery - 从列表中选择正确的类

Question

我有以下 HTML:

<tr id="item-1">
     <td class="shopping-cart-quantity">
         <div class="product-quantity">
            <input id="product-quantity" data-area="item-1" data-product="1" type="text" value="3">
         </div>
    </td>
</tr>

<tr id="item-2">
     <td class="shopping-cart-quantity">
         <div class="product-quantity">
            <input id="product-quantity" data-area="item-2" data-product="2" type="text" value="3">
         </div>
    </td>
</tr>

<tr id="item-3">
     <td class="shopping-cart-quantity">
         <div class="product-quantity">
            <input id="product-quantity" data-area="item-3" data-product="3" type="text" value="3">
         </div>
    </td>
</tr>

输入字段使用 Twitter Bootstrap Spin，输入 id="product-quantity"呈现如下:

<div class="input-group bootstrap-touchspin input-group-sm">
    <span class="input-group-btn">
        <button class="btn quantity-down bootstrap-touchspin-down" type="button">
            <i class="fa fa-angle-down"></i>
        </button>
    </span>
    <span class="input-group-addon bootstrap-touchspin-prefix"></span>
    <input id="product-quantity" data-area="item-3" data-product="3" type="text" value="3" readonly="" class="form-control input-sm">
    <span class="input-group-addon bootstrap-touchspin-postfix"></span>
    <span class="input-group-btn">
        <button class="btn quantity-up bootstrap-touchspin-up" type="button">
            <i class="fa fa-angle-up"></i>
        </button>
    </span>
</div>

我的目标是获取数据区域值，以便我可以将正确的数量应用于正确的产品，但是无论我做什么，它总是返回表中的第一项。

这是我的 JQuery:

$('.product-quantity').on('click','.input-group',function(){
        alert($('.input-group').find('#product-quantity').data("area"));
    });

Answer 1

在点击处理程序中this是实际点击的元素:

$('.product-quantity').on('click','.input-group',function(){
        alert($(this).find('#product-quantity').data("area"));
    });

但实际问题是 ID 重复。这是无效的 HTML，jQuery 只能看到第一个。

将 id="product-quantity" 替换为类并使用 .product-quantity