有沒有從錨定標記中調用JavaScript的參數的最佳做法？

我已經閱讀了以下問題有沒有從錨定標記中調用JavaScript的參數的最佳做法？

Javascript and Anchor Tags, Best Practice?

而且它似乎提出一個解決辦法，例如下面

<a id="foo" href="#">Click Me</a> 

document.getElementByID("foo").onclick = function() { alert("hi"); }

但是假設我有一堆的鏈接都調用具有相同功能一個不同的參數。我的快速和骯髒的解決辦法是將產生類似下面的

<a href="#" onClick="myFunction('1001');return false">Click Me 1</a> 
<a href="#" onClick="myFunction('1002');return false">Click Me 2</a> 
<a href="#" onClick="myFunction('1003');return false">Click Me 3</a>

是否有一個適應聽衆的解決方案來處理參數的方式？

來源

2012-03-12 Hoa

取決於參數。如果他們只是像在這裏展示的那樣自動遞增數字，您可以輕鬆編寫代碼爲您生成它們。否則，將參數放入數組並自動生成索引可能有意義或無意義。 – Cameron 2012-03-12 06:00:24

您標記了「jQuery」這個問題，是否允許jQuery被使用？它確實使事件處理更容易... – David 2012-03-12 06:13:11

jQuery會很好 – Hoa 2012-03-12 06:16:20

你可以在問題使用沿着這些線的數據屬性的每個元素：

<a href="#" id="foo" data-id="1000">Click Me 1</a>

，並使用以下回調：

document.getElementById("foo").onclick = function() { 
    alert(this.getAttribute('data-id')); 
}

在撥弄形式here。

不過，更好的選擇可能是使用jQuery來處理事情。假設上面的鏈接格式，看起來像這樣：

$('#foo').click(function(){ 
    alert($(this).attr('data-id')); 
});

來源

2012-03-12 06:05:19 rjz

用jQuery替代更新 – rjz 2012-03-12 06:28:33

您可以使用'$（this）.data（'id'）'而不是'.attr（）'。 – 2014-08-06 18:43:38

您可以使用委派。

<div id='links'> 
<a href="#" class="link" data-param1='1000' data-param2='something'>click</a> 
<a href="#" class="link" data-param1='1001' data-param2='something'>click</a> 
<a href="#" class="link" data-param1='1002' data-param2='something'>click</a> 
</div> 
<script type='text/javascript'> 
$links = document.getElementById("links"); 

$links.onclick=function(e){ 
    element = e.target; 
    if(element.tagName="a" && element.getAttribute("class")=="link"){ 
    console.log(element.getAttribute("data-param1")) 
    console.log(element.getAttribute("data-param2")); 
    } 
    return false; 
} 
</script>

來源

2012-03-12 06:08:43 mpm

注意，當你在HTML中有一個這樣的代碼：

<a href="#" id="foo" onClick="myFunction('1001');return false">Click Me 1</a>

這是完全一樣的，以在JS：

document.getElementById("foo").onclick = function(event) { 
    myFunction('1001'); 
    return false; 
}

當解析器發現了一個事件屬性，它以完全相同的方式創建一個匿名函數。

來源

2012-03-12 08:02:32 ZER0

有沒有從錨定標記中調用JavaScript的參數的最佳做法？

回答

相關問題