Question

我正在尝试在单击按钮时将参数传递给JQuery事件处理程序。在纯JavaScript中我使用onclick="function(argument)" 现在我将所有内联点击事件转移到外部调用，就像使用Jquery一样，即

 $(".selector").click(function(){
//some code
});

但是，在这种情况下，我很困惑如何从HTML标记传递参数，我应该如何在Jquery事件处理程序中接收参数。请帮忙。

Answer 1

绑定当前执行处理程序时传递给事件方法的可选数据对象。

在你的情况下，它将是这样的 -

$(".selector").on("click", function(event){
    //you can access the parameter value as follows
    console.log(event.target.value);
});

请参阅此处的官方文档Pass arguments from a button click to Jquery event handler

Answer 2

.click()函数接收一个EventData对象，该对象作为处理程序的第一个参数传递，您可以在处理程序中使用该对象。

例如：

$('.selector').click(function(data) {
  $(data).addClass('newClass');
});

如果您尝试从HTML传递数据，最简单的方法可能是将数据存储到代码的data属性中。

HTML

<div id="mydiv" data-arg="Hello world!">Click me</div>

JS

$('#mydiv').click(function(data) {
  var arg = $(data).attr('data-arg');
  console.log(arg);
});

您想要实现的目标

HTML

<button id="dark" data-stroke-width="0.5" 
  class="txtcolor uk-button" type="button">1px</button>

JS

$('button#dark').click(function(data) {
  selectStroke($(data).attr('data-stroke-width'));
});

检查documentation for click

Answer 3

样本：

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

var param_obj = {data : {param1: "Hello", param2: "World"}};
cool_function(param_obj);


$("dark").click({param1: 0.5}, selectStroke);

或

var i = 0.5;
$("dark").click({param1: i}, selectStroke);

或者如果您不想要处理程序的更改功能

var i = 0.5;
$("dark").click({param1: i}, function() {
    selectStroke(event.data.param1);
);

Answer 4

您可以传递要映射到event对象的参数，该对象通过jQuery作为第一个参数自动链接到事件处理函数。请尝试以下方法：

＆＃13;

$(".selector").click({firstName: "John", lastName: "Doe"}, function myFunction(e){
    console.log(e.data.firstName);
    console.log(e.data.lastName);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="selector">Click Me</button>

＆＃13;

将按钮单击的参数传递给Jquery事件处理程序

4 个答案: