Question

<button class="btn btn-warning delCartItem" onclick="delCartItem(3)">
Delete
</button>
<button class="btn btn-warning delCartItem" onclick="delCartItem(3)">
Delete
</button>
...so on

我正在制作可以删除购物车项目的按钮。

delCartItem()的参数是产品ID。

当我点击delCartItem()功能中的一个按钮时，如何获取按钮的索引？

补充：

这是我的目的：

当我点击按钮=＆gt;获取按钮的索引 =＆GT;使用$('.item_price').eq(idx).text()获取购物车商品的价格

<thead>
<tr>
    <th>
        <h3><strong> 項目 </strong></h3></th>
    <th>
        <h3><strong> 商品編號 </strong></h3></th>
    <th>
        <h3><strong> 商品名稱 </strong></h3></th>
    <th>
        <h3><strong> 存貨量 </strong></h3></th>
    <th>
        <h3><strong> 原價 </strong></h3></th>
    <th>
        <h3><strong> 數量 </strong></h3></th>
    <th>
        <h3><strong> 小計 </strong></h3></th>
    <th>
        <h3><strong> 操作 </strong></h3></th>
</tr>
</thead>
<tbody>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>用mBlock玩Arduino - Starting from Scratch</td>
        <td>0</td>
        <td class="item_price">300</td>
        <td>
            <select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
        </td>
        <td class="item_total_price">300</td>
        <td>
            <button class="btn btn-warning delCartItem" id='item1' onclick="delCartItem(this.id, 2)"> <i class="fa fa-times-circle"></i> 刪除 </button>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>深入淺出程式設計</td>
        <td>9</td>
        <td class="item_price">578</td>
        <td>
            <select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
        </td>
        <td class="item_total_price">578</td>
        <td>
            <button class="btn btn-warning delCartItem" id='item0' onclick="delCartItem(this.id, 1)"> <i class="fa fa-times-circle"></i> 刪除 </button>
        </td>
    </tr>
</tbody>

Answer 1

[编辑]

这应该有用。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<table>
<thead>
<tr>
    <th>
        <h3><strong> 項目 </strong></h3></th>
    <th>
        <h3><strong> 商品編號 </strong></h3></th>
    <th>
        <h3><strong> 商品名稱 </strong></h3></th>
    <th>
        <h3><strong> 存貨量 </strong></h3></th>
    <th>
        <h3><strong> 原價 </strong></h3></th>
    <th>
        <h3><strong> 數量 </strong></h3></th>
    <th>
        <h3><strong> 小計 </strong></h3></th>
    <th>
        <h3><strong> 操作 </strong></h3></th>
</tr>
</thead>
<tbody>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>用mBlock玩Arduino - Starting from Scratch</td>
        <td>0</td>
        <td class="item_price">300</td>
        <td>
            <select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
        </td>
        <td class="item_total_price">300</td>
        <td>
            <button class="btn btn-warning delCartItem" id='item1' onclick="delCartItem(this.id, 2)"> <i class="fa fa-times-circle"></i> 刪除 </button>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>深入淺出程式設計</td>
        <td>9</td>
        <td class="item_price">578</td>
        <td>
            <select name="cnt_item[]" class="selectpicker cnt_item" data-width="fit" data-style="btn-default" data-live-search="true"></select>
        </td>
        <td class="item_total_price">578</td>
        <td>
            <button class="btn btn-warning delCartItem" id='item0' onclick="delCartItem(this.id, 1)"> <i class="fa fa-times-circle"></i> 刪除 </button>
        </td>
    </tr>
</tbody>
</table>

＆＃13;

Programs.update({ _id: progs[i]._id }, { $set: { "Year.RoommWk1": room }});

＆＃13;

Answer 2

我建议在按钮元素上使用data-*属性来引用项ID并以编程方式创建单击处理程序，以便轻松检索按钮的索引。

＆＃13;

$("#the-table .btn").each(function(index, button){
  $(button).on("click", function(){
    var itemId = $(button).data("item-id");
    console.log("button index:", index);
    console.log("item id:", itemId);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="the-table">
  <tbody>
    <td class="item_price">578</td>
    <td>
      <button class="btn btn-warning delCartItem" data-item-id="1"> Delete </button>
    </td>
  </tbody>

  <tbody>
    <td class="item_price">608</td>
    <td>
      <button class="btn btn-warning delCartItem" data-item-id="2"> Delete </button>
    </td>
  </tbody>
</table>

＆＃13;

单击按钮时如何获取按钮的索引？

2 个答案: