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 =＆＃34; product-quantity＆＃34;呈现如下：

<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

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

1 个答案: