使用HTML「數據 - 」屬性

考慮行像這樣：使用HTML「數據 - 」屬性

<div id='abc' onclick='DoSomething(this.id)'></div>

現在，假設它擴展到更多的東西是這樣的：

<div id='abc' data-something='whatever' onclick='DoSomething(this.id)'></div>

這裏有沒有功能上的差異還，但這是我的問題。我正在尋找一種方法將'data-something'的值傳遞給DoSomething函數而不是id。我似乎無法找到這樣做的方法？可能嗎？

像下面這樣的東西會很好，但它當然不是它的工作原理。（我只包括它幫助說明了預期的目標。

<div id='abc' data-something='whatever' onclick='DoSomething(this.data-something)'></div>

來源

2013-07-19 m b

而且您一遍又一遍複製並粘貼相同的錯誤。缺少''' – epascarello

請閱讀：http://ejohn.org/blog/html-5-data-attributes/ – epascarello

作爲答案的組合，您可以創建一個函數，利用'dataset'並回退到'getAttribute'：http://jsfiddle.net/C3rnr/ – Ian

你應該能夠做到this.getAttribute("data-something")，像這樣：

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something"))></div>

，或者您可以使用this.dataset.something。

Here is my source

來源

2013-07-19 15:28:45 musefan

此解決方案將完美適用於我們的應用程序。非常感謝！作爲一個附註，我們不能將id用於我們的目的，因爲我們將來自兩個不同來源的代碼與一些（當前未完成的）內部自動化工具集成在一起。這些ID是不可預測的，並且是我們不能控制的，所以我們必須依靠這些額外的數據屬性（這是可預測的並且是我們已知的）來實現我們的目標。再次感謝。 –

你可以做

DoSomething(this.dataset.something)

但它通常建議的JavaScript部分和HTML，這是特別容易分開時，你元素有一個id：

<div id='abc' data-something='whatever'></div> 
<script> 
    document.getElementById('abc').onclick = function(){ 
     DoSomething(this.dataset.something) 
    } 
</script>

在Internet Explorer，support for dataset is incomplete在IE10-，您需要使用

DoSomething(this.getAttribute('data-something'))

來源

2013-07-19 15:28:22

不知道這個！真棒！ – 2013-07-19 15:30:46

只需確保它在您需要支持的瀏覽器中可用[我可以使用數據集]（http://caniuse.com/dataset） – dc5

您應該使用getAttribute方法：

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something")'></div>

但我強烈建議你aviod聯JavaScript代表團元素。您應該更好地使用DOM或jQuery，並注意jQuery有一個方法可以更輕鬆地處理屬性。

來源

2013-07-19 15:30:11

，如果你想考慮的jQuery你可以在你的代碼轉換成出頭的那樣：

HTML

<div id="abc" data-something="whatever">click here</div>

jQuery的

jQuery(document).ready(function($) { 
    $('#abc').on('click', function() { 
     DoSomething($(this).attr('data-something')); 
    }); 
});

或更好

jQuery(document).ready(function($) { 
    $('#abc').on('click', function() { 
     DoSomething($(this)); 
    }); 
}); 

function DoSomething(obj){ 
    alert(obj.attr('id')); 
    alert(obj.attr('data-something')); 
}

來源

2013-07-19 15:55:57 Zauker

使用HTML「數據 - 」屬性

回答

相關問題