Получить атрибуты Значение для нескольких классов

Im a Javascript beginner. Я хочу получить значение атрибута для нескольких элементов класса. Я пробовал с идентификаторами, но он не перегружен, поскольку идентификаторы должны быть уникальными.Получить атрибуты Значение для нескольких классов

Мой 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

Вы хотите получить атрибут данных здесь? – Choco

Ty Choco, но как я могу получить значение атрибут «данные», соответствующий элементу , на который пользователь нажал? (Я надеюсь, что это делает, мой английский не очень хорош) –

Первый закрыть якорь Теги

<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, он отлично работает! –

ok Примите, пожалуйста, ответ, который может помочь кому-то, кто ищет – Choco

Попытка использовать это:

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

Вы можете получить любой другой атрибут вам нравится из этого элемента просто заменив innerHTML по имени этого атрибута

источник

2014-10-31 10:21:36

В чем разница с ответом Чоко? Я имею в виду, лучше ли вам использовать свою функцию? –

Его просто другой способ достичь той же цели. Вместо доступа к элементу я получил доступ к ним по имени класса. Вам не нужно связывать каждый объект с событием on-click в этом методе. Поэтому, если вы хотите получить аналогичную функциональность где-то еще на странице, вы можете напрямую дать им «тест». Но для текущего сценария, я думаю, что ответ Choco более уместен –

Я слишком поздно, как всегда, но я хотел бы использовать атрибут 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

Вы, наверное, интересно, почему вы не может просто достичь атрибута data, используя ключевое слово this от myJavascriptFunc(). Это потому, что вы используете встроенную регистрацию событий, а ключевое слово 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

Получить атрибуты Значение для нескольких классов

ответ

Смежные вопросы