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

【问题标题】：Pass arguments from a button click to Jquery event handler将参数从按钮单击传递给 Jquery 事件处理程序
【发布时间】：2018-06-27 01:17:03
【问题描述】：

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

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

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

【问题讨论】：

能否请您分享 html 并显示您要传递的参数
你能添加一个完整的 Javascript 函数示例吗？它可以帮助回答者将其转换为 Jquery 函数

标签： javascript jquery html

【解决方案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

【讨论】：

替换为event.target.value 甚至$(this).value() 也可以

【解决方案2】：

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

例如：

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

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

HTML

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

$('#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>

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

查看documentation for click

【讨论】：

是否让 EventData 处理从 onclick 事件传递的参数值。另外，我应该如何从 html 标签传递这些数据？
感谢编辑回复。我也编辑了我的问题。问题的第二部分是我应该如何将值/参数从 HTML 传递给 Jquery EventHandler？
您能否扩展您的问题以准确显示您想要实现的目标？
这是原始的 HTML 代码，没有我想要摆脱内联 onclick 事件。但是，想要相同的功能
@Victor，任何答案对你有用吗？如果可以，你能接受吗？

【解决方案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);
);

【讨论】：

感谢您的回复。但是，这是预定义参数的示例。问题是如何从 HTML 动态传递值/参数并在 JQuery 中处理它们？
这不是您从 HTML 按钮单击动态传递数据的方式。这是我的原始 HTML 代码。现在，我想摆脱内联 onclick 事件。但是，想要保持相同的功能
谁会分散您的注意力：$("dark").click({param1: 0.5}, selectStroke); 或 var i = 0.5; $("dark").click({param1: i}, selectStroke);