提问人：Chameleon 提问时间：9/2/2015 最后编辑：Chameleon 更新时间：9/2/2015 访问量：1295
如何使用不显眼的 JavaScript 将参数传递给函数？
How to pass arguments to function using unobtrusive JavaScript?
问：
在传统代码中，我将像这样将参数传递给链接按钮：
<a href="javascript:call_hello(1, 2, 3)" role="button">Hello</a>
我怎样才能使用 JQuery 或类似库以不显眼的 JavaScript 风格做到这一点。
<a href="#" class="hello" arg1="1" arg2="2" arg3="3" role="button">Hello</a>
不要把重点放在代码更长上，因为它只是示例。我想以这种方式附加 Javascript 代码。
$(".hello").on('click', call_hello2);
您能否为不显眼的 JavaScript 风格提出您认为的最佳解决方案（通过匹配元素而不是通过 html 代码来附加 Javascript）。
答：
1赞
haim770
9/2/2015
#1
以不显眼的方式传递给 jQuery 插件/帮助程序的参数的常见方法是使用以下属性：data-*
<a href="#" class="hello" data-arg1="1" data-arg2="2" data-arg3="3" role="button">Hello</a>
然后在您的代码中：
$('.hello').on('click', function(e) {
var options = $(this).data();
if (options.arg1 == 1)
...
});
您还可以设置默认值，并且仅覆盖传递的参数：options
$('.hello').on('click', function(e) {
var defaultOptions = {
arg1: "something",
arg2: "something2",
arg3: "something3"
},
passedOptions = $(this).data(),
options = $.extend(defaultOptions, passedOptions);
});
1赞
LostMyGlasses
9/2/2015
#2
你可以试试这个：
<a id="hello-button" href="#" class="hello" data-args="1,2,3" role="button">Hello</a>
使用以下 JavaScript：
function call_hello2() {
var args = $("#hello-button").data('args').split(',');
call_hello.apply(this, args);
}
这样，您可以拥有可变数量的参数。
最后，只需使用您发布的代码：
$(".hello").on('click', call_hello2);
评论
0赞
pllee
9/2/2015
您可能想要执行以下操作：这将调用 vs 之类的方法call_hello.apply(this, args)(1,2,3)call_hello(args)([1,2,3])
0赞
LostMyGlasses
9/2/2015
@pllee好点，会更优雅。我会编辑答案。
2赞
Satpal
9/2/2015
#3
您应该使用带有前缀的自定义属性，这些属性可以使用 $.fn.data（） 进行存储和获取data-*
存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。
或者，也可以使用 HTMLElement.dataset。
只读属性允许在读取和写入模式下访问元素上设置的所有自定义数据属性 （data-*）。它是 DOMString 的映射，每个自定义数据属性对应一个条目。
HTMLElement.dataset
$(function() {
$('a').on('click', function(event) {
event.preventDefault();
var arg1 = $(this).data('arg1');
alert(arg1)
//Using native JS
console.log(this.dataset.arg1)
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="hello" data-arg1="1" data-arg2="2" data-arg3="3" role="button">Hello</a>
1赞
beautifulcoder
9/2/2015
#4
应该是：
<a id="hello-button" href="#" class="hello" data-args="1,2,3" role="button">Hello</a>
$(".hello").on('click', function (e) {
var el = $(e.target);
var args = el.data('args').split(',');
call_hello(args);
});
这是最不显眼的方式。你不会用很多属性来破坏 DOM，也不会创建任意的 JavaScript 函数。
评论