Question

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

<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

您应该使用data-*带前缀的自定义属性，可以使用$.fn.data()

存储和提取

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

也可以使用HTMLElement.dataset。

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

＆＃13;

$(function() {
  $('a').on('click', function(event) {
    event.preventDefault();
    var arg1 = $(this).data('arg1');
    
    alert(arg1)
    
    //Using native JS
    console.log(this.dataset.arg1)
  })
});

＆＃13;

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

＆＃13;

Answer 2

以不引人注目的方式传递给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);
});

Answer 3

你可以试试这个：

<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 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将参数传递给函数？

4 个答案: