Как создать разные события для изображений в массиве?

Question

[NikitkOS]

Здравствуйте. Хочу сделать неразмытую картинку при нажатии на нее и размытую при повторном. Этот код работает, но только для одной картинки. Немного не понимаю, как сделать переменную (setBlur[?]) в функции blurStyle, чтобы у каждой картинки было свое событие. (Если не считать создание копии этой функции и изменении переменных).

var setBlur = document.getElementsByTagName("img");

 function setListenerForImage(){
	 for(var i = 0; i < setBlur.length; i++){ 
	 setBlur[i].addEventListener("click", blurStyle);	
 }
 }
	 
	 var count = 0;
	 function blurStyle(e){
		  if(e.mousedown) return;
		 if(count == 0){
	setBlur[0].style.filter = "blur(0px)"; 
	count++;
		 }else if(count == 1){
		setBlur[0].style.filter = "blur(5px)"; 
	count = 0;	 
		 } 
	 } 
	 
	   setListenerForImage();

Answer 1

[Алексей Шашенков]

Тык

var setBlur = document.getElementsByTagName("img");

function setListenerForImage(){
  for(var i = 0; i < setBlur.length; i++){ 
    setBlur[i].addEventListener("click", blurStyle);	
  }
}

function blurStyle(e){
  var img=this;
  var state=img.getAttribute('blur');
  if(e.mousedown) return;
  if(state == 1){
    img.style.filter = ""; 
    img.setAttribute('blur',0);
  }else{
    img.setAttribute('blur',1);
    img.style.filter = "blur(5px)"; 

  } 
} 

setListenerForImage();

Пример

Comments

[NikitkOS]

Огромное спасибо! Но только не очень понял, что значит строчка var img=this; Ссылка на объект, для которого назначается событие?

[Алексей Шашенков]

NikitkOS: Все верно.