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

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

I'm making the button which can delete the shopping cart item.

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

And the parameter of delCartItem() is product id.

delCartItem()的参数是产品ID。

How to get the index of button when I click one of the button in delCartItem() function?

当我点击delCartItem()函数中的一个按钮时,如何获取按钮的索引?

Supplement:

This is my purpose:

这是我的目的:

When I click the button => get the index of button => use $('.item_price').eq(idx).text() get the price of shopping cart item

当我点击按钮=>获取按钮的索引=>使用$('。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>

2 个解决方案

#1

[edited]

This should work.

这应该工作。

$(".delCartItem").on("click", function(){
  
  var $tr = $(this).closest("tr");
  
  var price = $tr.find(".item_price").text();
  var id = $(this).attr('id');
  
  var index = $("tr", $tr.closest("table")).index($tr) 
  
  alert("clicked btn in rom: "+ index);
  
  //delCartItem(index);

});





function delCartItem(i){
  //alert("deleting item "+i);
  return;
}

<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>

#2

I suggest the use of a data-* attribute on your button elements to reference the item ids and to create the click handlers programmatically to ease the retrieval of the indexes of the buttons.

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

$("#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);
  });
});

<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>

#1