獲取多個類別的屬性值

Im a Javascript beginner。我想獲得多個類元素的屬性值。我嘗試了ID，但由於ID應該是獨一無二的，所以它並不令人欣慰。獲取多個類別的屬性值

我的HTML看起來像這樣：

<a href="#" class="Test" onclick="myJavascriptFunc()" data="FooBar_1"> 
<a href="#" class="Test" onclick="myJavascriptFunc()" data="FooBar_2"> 
<a href="#" class="Test" onclick="myJavascriptFunc()" data="FooBar_3">

任何幫助，將不勝感激。

感謝

來源

2014-10-31 Nab Ilovich

使用document.getElementsByClassName – Choco 2014-10-31 10:15:07

是否要在此獲取數據屬性？ – Choco 2014-10-31 10:19:04

Ty Choco，但是我怎樣才能得到屬性「data」對應用戶點擊的元素的值？（我希望它使得sence，我的英文不是很好） – 2014-10-31 10:19:49

首先更換的innerHTML關閉你的錨標籤

讓你從該元素像其他任何屬性

<a href="#" class="Test" onclick="return myJavascriptFunc(this);" data="FooBar_1">Test1</a> 
<a href="#" class="Test" onclick="return myJavascriptFunc(this)" data="FooBar_2">Test2</a> 
<a href="#" class="Test" onclick="return myJavascriptFunc(this)" data="FooBar_3">Test3</a>

然後使用此javascript函數離子

function myJavascriptFunc(item) 
{ 
    alert(item.getAttribute("data")); 
    return false 

}

，讓我知道，如果它

來源

2014-10-31 10:24:17 Choco

Ty choco，它工作的很棒！ – 2014-10-31 10:36:03

好的，請接受它可能有助於幫助正在搜索的人的答案 – Choco 2014-10-31 10:37:50

使用嘗試這樣的：

function test(){ 
    var x = document.getElementsByClassName("myClass"); 
    var i; 
    for (i = 0; i < x.length; i++) { 
     var val = x[i].innerHTML; //innerHTML returns the written text inside the element tag 
     alert(val);  
     alert(x[i].getAttribute("data")); //this will give you the data attribute 
    } 
}

你可以只通過該屬性的名稱

來源

2014-10-31 10:21:36

Choco的答案有什麼區別？我的意思是你使用你的功能更好？ – 2014-11-11 19:11:15

它只是一個不同的方法來實現相同的目標。我沒有通過元素訪問，而是通過classname訪問它們。您不必使用此方法將每個對象與單擊事件綁定。所以如果你想在頁面上的其他地方找到類似的功能，你可以直接給他們'測試'類。但對於目前的情況，我認爲巧克力的答案更適合 – 2014-11-12 04:49:27

我來不及一如既往，但我會用HTML 5的數據集屬性：

<!DOCTYPE html> 
<html> 
<head> 
    <script> 
    function doSomething(classname,func,datakey) 
    { 
    var hrefs = document.getElementsByClassName(classname), // get all elements with the class 
    i = 0; // initialize the loop 
    for(;i < hrefs.length; i++) // iterate through all elements 
    { 
     func(hrefs[i].dataset[datakey]); // execute the passed function with the content of the dataset as first argument 
    } 
    } 
    function alertval(value) // example function to do something with it 
    { 
    alert(value); 
    } 
    window.onload = function() 
    { 
    doSomething("Test",alertval,"something"); // just test it 
    } 
</script> 
</head> 
<body> 
    <a href="#" class="Test" data-something="FooBar_1">Test1</a> 
    <a href="#" class="Test" data-something="FooBar_2">Test2</a> 
    <a href="#" class="Test" data-something="FooBar_3">Test3</a> 
</body> 
</html>

來源

2014-10-31 10:47:57 Daniel

你可能想知道爲什麼你使用this關鍵字myJavascriptFunc()不能僅僅達到data屬性。這是因爲您正在使用內嵌事件註冊，並且關鍵字this指的是window對象。要解決此問題，您必須確保this關鍵字實際上已寫入onclick屬性中。

var elems = document.getElementsByClassName('test'); 
 

 
for (var i = 0, len = elems.length; i < len; i++) { 
 
    elems[i].onclick = myJavascriptFunc; 
 
} 
 

 
function myJavascriptFunc() { 
 
    alert(this.getAttribute('data')); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <a href="#" class="test" data="FooBar_1">FooBar_One</a><br> 
 
    <a href="#" class="test" data="FooBar_2">FooBar_Two</a><br> 
 
    <a href="#" class="test" data="FooBar_3">FooBar_Three</a> 
 
</body> 
 

 
</html>

辦法看到的區別：

<element onclick="myJavascriptFunc()">。 // this指的是window對象，因爲元素不會傳遞。

<element onclick="alert(this.getAttribute('data'));">。 // this指的是元素。

來源

2014-10-31 13:00:25 mtl

獲取多個類別的屬性值

回答

相關問題