當我點擊按鈕時如何獲取按鈕功能的索引？

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()的參數是產品編號。

如何獲得按鈕的索引當我點擊delCartItem()函數中的某個按鈕時？

補充：

這是我的目的：

當我點擊按鈕=>獲得按鈕的索引 =>使用$('.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

[編輯]

這應該工作。

$(".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>

Answer 2

我建議您按鈕元素使用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>