Как передать аргументы функции с помощью ненавязчивого JavaScript?

Question

В традиционном коде я передать аргументы кнопки, чтобы связать так:

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

Как я могу сделать это в ненавязчивом стиле JavaScript с JQuery или аналогичной библиотекой.

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

Не сосредотачивайтесь на том, что код длиннее, поскольку это только пример. Я хочу добавить Javascript-код таким образом.

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

Можете ли вы предложить лучшее решение по вашему мнению для ненавязчивого стиля JavaScript (прикрепляя Javascript сопоставляя элементы не HTML кода).

Answer 1

Вы должны использовать data-* приставку пользовательских атрибутов, которые могут быть сохранены и извлекаются с помощью $.fn.data()

хранения произвольных данных, связанных с соответствием элементов или вернуть значение в названном хранилище данных для первого элемента в наборе согласованных элементов.

В качестве альтернативы можно использовать HTMLElement.dataset.

HTMLElement.dataset свойство только для чтения позволяет получить доступ, как в чтения и записи режима, чтобы атрибуты (данных- *) установлен на элементе все пользовательские данные. Это карта 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.