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

Question

我正在尝试在单击按钮时将参数传递给JQuery事件处理程序。 在普通的JavaScript中，我使用了onclick="function(argument)"现在，我将所有内联click事件都转移到外部调用中，例如使用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);
});

请参阅此处的官方文档将按钮单击中的参数传递给Jquery事件处理程序

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'));
});    

查看文档以获取有关点击的信息

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自动链接到事件处理函数，作为第一个参数。 请尝试以下操作：

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

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