如何使用不显眼的 JavaScript 将参数传递给函数？

Question

在传统代码中，我将像这样将参数传递给 link 按钮：

<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）。

Answer 1

以不显眼的方式将参数传递给 jQuery plugin/helper 的常用方法是使用 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);
});

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

Answer 3

您应该使用 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.

也可以使用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.

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

Answer 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 函数。

如何使用不显眼的 JavaScript 将参数传递给函数？

How to pass arguments to function using unobtrusive JavaScript?

javascript

jquery

unobtrusive-javascript