Как обращаться к элементам событием без указания на их название?

Question

[Ingernirated]

Хлопцы, подскажите пожалуйста
Есть одна функция, как её забить на все элементы страницы?
https://jsfiddle.net/6kncqLt1/4/

т.е. чтобы при нажатии на любой из элементов его цвет изменился и в консоли написало название его класса, а если их много в этом классе, то его место в массиве с названием массива.

Answer 1

[alex]

function changeColor(index) {
	return function(e) {
  	e.target.style.backgroundColor = "black";
  	console.log('index: ', index);
  }
}

function qs(selector) {
	return document.querySelectorAll(selector);
}

qs('.block').forEach(function(el, i) {
  el.addEventListener('click', changeColor(i), false);
});

qs('.boxer').forEach(function(el, i) {
  el.addEventListener('click', changeColor(i), false);
});

Comments

[Ingernirated]

спасибо,подскажите пожалуйста а как работает здесь
[].slice.call
а можно как-то узнать место в массиве?
console.log(e.target.classList.value);
допустим, у нас 3 элемента с названием класса block, а мы нажали на 2-ой элемент, как узнать, что это был element("block)[1]?

[alex]

Ingernirated:

а можно как-то узнать место в массиве?

переделал ответ

спасибо,подскажите пожалуйста а как работает здесь

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

[Ingernirated]

Alex: я просто снимаю шляпу перед вашим кодом, в какой книжке можно познать все эти тонкости?

[alex]

Ingernirated: да тут ничего такого тонкого нет) посмотреть можно все там же + как можно больше практики

[Ingernirated]

Alex: в каком разделе там описывается этот кусочек?

function qs(selector) {
  return document.querySelectorAll(selector);
}

qs('.block').forEach(function(el, i) {
  el.addEventListener('click', changeColor(i), false);
});

[alex]

Ingernirated:
https://learn.javascript.ru/function-basics#возвра...

https://learn.javascript.ru/searching-elements-dom...

https://learn.javascript.ru/array-iteration#foreach

https://learn.javascript.ru/introduction-browser-e...

https://learn.javascript.ru/closures

[Ingernirated]

Alex: тысяча извинений, но почему исправленный пример не хочет работать?

var begin;
function go(eve) {
	var x = eve.clientX;
	var y = eve.clientY;
	console.log("left = " + x + " top = " + y);
	}

function start() {
	begin = setInterval(go, 20);
}
function stop() {
	clearInterval(begin);
}
box.addEventListener("mousedown", start);
box.addEventListener("mouseup", stop);

изначально было просто

function go(eve) {
	var x = eve.clientX;
	var y = eve.clientY;
	console.log("left = " + x + " top = " + y);
	}
box.addEventListener("mousedown", go);

и оно работало, а с интервалами, не хочет, пишет

TypeError: Cannot read property 'clientX' of undefined
    at go

[alex]

Ingernirated:

function start(e) {
  begin = setInterval(go.bind(this, e), 20);
}

[Ingernirated]

Alex:
https://jsfiddle.net/6kncqLt1/6/
чёт не оч (

[alex]

Ingernirated: go.bind(this_запятая_пробел_e)

[Ingernirated]

Alex: почему она не хочет каждые 20мс выдавать результат текущего положения мыши, а только один при нажатии?

[alex]

Ingernirated: а она и не должна это делать. у вас каждые 20мс выдаются координаты мыши которые были в момент нажатия(mousedown), в не зависимости от того как вы в дальнейшем будете двигать курсором. если хотите отслеживать движение мыши, уберите setinterval и используйте событие mousemove

Answer 2

[Николай Чуприк]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
   $('.block').click(function(){
       $(this).css({'backgroundColor' : 'black'});
       var myClass = $(this).attr('class');
       var ind = $('.'+myClass).index(this);
       console.log(myClass);
       if (ind) console.log(ind);
    });
</script>