获取多个类别的属性值

问题描述：

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">

任何帮助，将不胜感激。

感谢

使用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 

}

，让我知道，如果它

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 
    } 
}

你可以只通过该属性的名称

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>

答

你可能想知道为什么你使用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指的是元素。

获取多个类别的属性值

相关推荐