如何將數據傳遞給我的點擊收聽

Question

我在HTML中的按鈕，單擊時，我需要它的索引屬性值傳遞給我的點擊收聽：

<button class="btn buy-button js-prevent-cart-listener guys" index="1">Add To Cart</button> 

和聽衆：

$('.girls').on('click', buyButtonGirlsClickHandler, index); 

所以，當我運行這個功能，我可以訪問事件值和函數中使用它：

function buyButtonClickHandler(evt) { 
    console.log(evt.value); 
    } 

我不想將其更改爲在該按鈕上附加「onclick（）」。這是可能的，如果是這樣的話？顯然上面的代碼不能通過索引值，我已經嘗試了很多次

Answer 1

你不需要在on函數中傳遞索引。你應該嘗試的功能，改變你對

$('.girls').on('click', buyButtonGirlsClickHandler); 

並在處理程序可以通過attr

function buyButtonClickHandler(evt) { 
    console.log(evt.value); 
    var index= $(event.target).attr("index"); 
    } 

https://jsfiddle.net/525npjfn/

收到或@Andreas評論，請使用這裏麪點擊。

function buyButtonGirlsClickHandler(evt) { 
    console.log(evt.value); 
     var index = this.getAttribute("index"); 
     alert(index); 
    } 

https://jsfiddle.net/525npjfn/2/

Answer 2

在點擊按鈕，你可以存儲在一個變量，它的索引值，然後將其傳遞到所需要的功能。這是解決您的問題的乾淨片段。

請使用data-前綴來使用自定義HTML屬性，否則HTML驗證器會爲此哭。

$(document).ready(function() { 
 
    $('.js-prevent-cart-listener').click(function() { 
 
    var idx = $(this).attr('data-index'); 
 
    buyButtonClickHandler(idx); 
 
    }) 
 
}); 
 

 
function buyButtonClickHandler(idx) { 
 
    console.log("This is index value " + idx); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn buy-button js-prevent-cart-listener guys" data-index="1">Add To Cart</button>

Answer 3

而不是直接傳遞的事件處理程序，它包裝到一個新的函數內部。您的索引數據將被傳遞，因爲它保持在範圍內。

let index = "whatever your index data is"; 
$('.girls').on('click', (e, index) => buyButtonGirlsClickHandler(e, index)); 

注：我在那裏使用ES6語法，可能無法在舊版瀏覽器上運行。