javascript - Using data- attribut with a hypertext link

Question

I have read this tutorial tuto

i'd like to use the attribut data- in a hypertext link:

 <a href="#" onClick="openbox2('Validation de concept technique', 1)" data-arr="@fa.Id_element" id="lien">Donner votre avis</a>

in the javascript part:

  function openbox2(formtitle, fadin) {
         var self = $(this);
         var arr = self.data('arr');
        alert(arr);
}

i get always the same alert message undefined.

What is the reason of this problem? How can i fix it?

score 3 · Accepted Answer

由于您附加事件的方式，this不是单击的元素。使用on-事件属性现在已经很过时了，并且不是一个很好的关注点分离。因此应该避免。由于您已经将 jQuery 用于您的逻辑，因此最好也使用它来附加您的事件：

<a href="#" data-arr="@fa.Id_element" id="lien" class="openbox">Donner votre avis</a>

$('.openbox').click(openbox2);

function openbox2(formtitle, fadin) {
    var self = $(this);
    var arr = self.data('arr');
    alert(arr);
}

score 2 · Accepted Answer

由于您使用的是内联单击处理程序，this因此在处理程序函数内部不引用单击的元素，您需要将引用作为参数传递给处理程序方法

<a href="#" onClick="openbox2(this, 'Validation de concept technique', 1)" data-arr="@fa.Id_element" id="lien">Donner votre avis</a>

然后

function openbox2(el, formtitle, fadin) {
    var self = $(el);
    var arr = self.data('arr');
    alert(arr);
}

另一种解决方案是使用.call()将自定义上下文传递给openbox2方法

<a href="#" onClick="openbox2.call(this, 'Validation de concept technique', 1)" data-arr="@fa.Id_element" id="lien">Donner votre avis</a>

然后

function openbox2(formtitle, fadin) {
    var self = $(this);
    var arr = self.data('arr');
    alert(arr);
}

2 回答 2