如何使用不引人注目的JavaScript將參數傳遞給函數？

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的映射，每個自定義數據屬性都有一個條目。

 $(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 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函數。