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>

输入域使用推特Bootstrap旋转，输入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>

我的目标是获取数据区域值，以便我可以将正确的数量应用到正确的产品上，但是无论我做什么，它总是 returns [=26= 中的第一项].

这是我的 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" 替换为 class 并使用 .product-quantity

Jquery - 从列表中选择正确的 class

Jquery - Selecting the correct class from a list

javascript