Форум

serhioses · #1 (**permalink**) 03.08.2015, 23:52

Каким образом можно на нативном JS сделать выборку элементов (например document.getElementsByTagName('a')) и повесить каждому элементу отобранного массива обработчик? В JQuery понятно, можно сразу вешать допустим click (например $('a').click(function () { $(this)... };) и внутри к текущему элементу обращаться как $(this). Как это сделать на нативном JS? ведь document.getElementsByTagName('a').addEventListene r('click', function () {}, false); не работает.

EmperioAf · #2 (**permalink**) 04.08.2015, 00:12

да, а

document.getElementsByTagName('a')[0].addEventListener('click', function () {}, false); сработает

рони · #3 (**permalink**) 04.08.2015, 06:33

serhioses,
циклом по всем элементам способом EmperioAf,

serhioses · #4 (**permalink**) 04.08.2015, 09:34

Не понимаю... допустим есть список:

<ul>
<li><a data-id="1"></a></li>
<li><a data-id="2"></a></li>
<li><a data-id="3"></a></li>
<li><a data-id="4"></a></li>
</ul>

Как мне навесить click на каждую ссылку?
JQuery: $('a').click(function () { var id = $(this).data('id') });
Как это сделать на JS?

рони · #5 (**permalink**) 04.08.2015, 10:46

Сообщение от рони

Как это сделать на JS?

Сообщение от рони

циклом по всем элементам способом EmperioAf

в JQuery точно такой же цикл но скрытый внутри.

рони · #6 (**permalink**) 04.08.2015, 10:58

serhioses,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  a:after{
    content: attr(data-id);
  }

  </style>
</head>

<body>
   <ul>
<li><a data-id="1"></a></li>
<li><a data-id="2"></a></li>
<li><a data-id="3"></a></li>
<li><a data-id="4"></a></li>
</ul>
<script>
    var a = document.getElementsByTagName('a'), fn = function() {
   alert(this.dataset.id)
},i=0, el;
for ( ; el = a[i++]; )  el.addEventListener('click', fn, false);
</script>
</body>

</html>

serhioses · #7 (**permalink**) 04.08.2015, 20:21

Спасибо большое!!!!!!!!! Я так тупил... У меня был следующий код для теста:

for (var i = 0; i < a.length; i++) {
	a[i].addEventListener('click', (function (i){
		console.log(i);
	}(i)), false);
}

Естественно он сразу же и срабатывал.
И я сидел думал ну как еще можно повесить событие на элемент. А потом с помощью вашего решения понял что мне просто внутри нужно вернуть функцию и все будет работать!

for (var i = 0; i < a.length; i++) {
		a[i].addEventListener('click', (function (i){
			return function () {
				console.log(i);
			}
		}(i)), false);
	}

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript