如何使用不引人注目的JavaScript将参数传递给函数？

In traditional code I will pass arguments to link button like this:

在传统的代码中，我会将参数传递给链接按钮，如下所示：

<a href="javascript:call_hello(1, 2, 3)" role="button">Hello</a>

How can I do it in unobtrusive JavaScript style with JQuery or similar library.

如何使用JQuery或类似的库以不引人注目的JavaScript样式执行此操作。

<a href="#" class="hello" arg1="1" arg2="2" arg3="3" role="button">Hello</a>

Do not focus that code is longer since it is only example. I want attach Javascript code in such way.

不要只关注代码更长，因为它只是示例。我想以这种方式附加Javascript代码。

$(".hello").on('click', call_hello2);

Can you suggest the best solution in your opinion for unobtrusive JavaScript style (attaching Javascript by matching elements not by html code).

您是否可以针对不引人注目的JavaScript样式建议最佳解决方案（通过匹配元素而不是通过HTML代码附加Javascript）。

4 个解决方案

#1

You should use data-* prefixed custom attributes which can be stored and fetched using $.fn.data()

您应该使用data-*前缀自定义属性，可以使用$ .fn.data（）存储和获取这些属性

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

存储与匹配元素关联的任意数据，或者在指定数据存储中返回匹配元素集中第一个元素的值。

Alternatively HTMLElement.dataset can also be used.

或者也可以使用HTMLElement.dataset。

The HTMLElement.dataset read-only property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element. It is a map of DOMString, one entry for each custom data attribute.

HTMLElement.dataset只读属性允许在读取和写入模式下访问元素上设置的所有自定义数据属性（data- *）。它是DOMString的映射，每个自定义数据属性都有一个条目。

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

#2

The common approach for arguments passing to a jQuery plugin/helper in an unobtrusive way is to use the data-* attributes:

以不引人注目的方式传递给jQuery插件/帮助器的参数的常用方法是使用data- *属性：

<a href="#" class="hello" data-arg1="1" data-arg2="2" data-arg3="3" role="button">Hello</a>

Then in your code:

然后在你的代码中：

$('.hello').on('click', function(e) {
    var options = $(this).data();

    if (options.arg1 == 1)
        ...
});

You can also set your default options and only override the passed arguments:

您还可以设置默认选项，并仅覆盖传递的参数：

$('.hello').on('click', function(e) {
    var defaultOptions = {
         arg1: "something",
         arg2: "something2",
         arg3: "something3"
    },
    passedOptions = $(this).data(),
    options = $.extend(defaultOptions, passedOptions);
});

#3

Should be:

应该：

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

This is the most unobtrusive way of doing it. You don't clobber the DOM with lots of attributes nor create arbitrary JavaScript functions.

这是最不引人注目的方式。您不会破坏具有大量属性的DOM，也不会创建任意JavaScript函数。

#4

You could try this:

你可以试试这个：

<a id="hello-button" href="#" class="hello" data-args="1,2,3" role="button">Hello</a>

with the following JavaScript:

使用以下JavaScript：

function call_hello2() {
    var args = $("#hello-button").data('args').split(',');
    call_hello.apply(this, args);
}

This way you could have a variable number of arguments.

这样你就可以拥有可变数量的参数。

Finally, just use the code you posted:

最后，只需使用您发布的代码：

$(".hello").on('click', call_hello2);

#1