Question

我的html中有一个按钮，点击后我需要它将index属性值传递给我的点击监听器：

<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函数中传递索引。您应该尝试将您的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验证程序会为此而哭泣。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

不是直接传递事件处理程序，而是将其包装在新函数中。您的索引数据将被传递，因为它保留在范围内。

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

注意：我在那里使用ES6语法，可能无法在旧浏览器上使用。

如何将数据传递给我的点击监听器

3 个答案: