Обработка событий в Javascript

Я довольно новичок в мире Javascript. У меня есть три картины:Обработка событий в Javascript

1. mango.jpg 
2. apple.jpg 
3. pineapple.jpg.

То, что я пытаюсь сделать, это всякий раз, когда я нажимаю на изображение в браузере он получает blurred..I есть 3 дополнительных смазанных изображений с именами:

1.apple_blur.jpg 
2.mango_blur.jpg 
3.pineapple_blur.png

это мой код ниже (Я пытаюсь сделать это самый короткий путь)

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> I'm alive! </title> 
<script> 
window.onload = pageLoadedHandler; 
function pageLoadedHandler() { 
blur_images=[{id_pic:["apple","apple_blur.jpg"]},{id_pic:["mango","mango_blur.jpg"]}, {id_pic:["pineapple","pineapple_blur.png"]}]; 
for(i=0;i<=blur_images.length;++i) { 
    blur_image=blur_images[i]; 
    window[blur_image.id_pic[0]]=document.getElementById(blur_image.id_pic[0]); 
    window[blur_image.id_pic[0]].onclick=blur_func; 
} 
function blur_func() { 
    for(i=0;i<=blur_images.length;++i) { 
    blur_image=blur_images[i]; 
    window[blur_image.id_pic[0]]=document.getElementById(blur_image.id_pic[0]); 
    window[blur_image.id_pic[0]].src=blur_image.id_pic[1]; 
    } 
} 
} 
</script> 
</head> 
<body> 
<img src="apple.jpg" id="apple"></img> 
<img src="mango.jpg" id="mango"></img> 
<img src="pineapple.png" id="pineapple"></img> 
</body> 
</html>

Когда я нажал на картинку в браузере, все изображения размываются вместо это конкретное изображение (это связано с тем, что всякий раз, когда я нажимаю на любое изображение, обработчик «blur_func» выполняет итерацию и заменяет ВСЕ изображения своими размытыми изображениями версии.

Как я могу переписать код, чтобы сообщить обработчику blur_func, чтобы заменить изображение яблока ТОЛЬКО с размытым изображением яблока ?.

источник

2015-05-23 repzero

Edit:

Есть несколько исправлений в коде:

window.onload = pageLoadedHandler; 
/* moved outside to make it global and used `var` keyword */ 
var blur_images=[{id_pic:["apple","apple_blur.jpg"]},{id_pic:["mango","mango_blur.jpg"]}, {id_pic:["pineapple","pineapple_blur.png"]}]; 
function pageLoadedHandler() { 
    for(var i=0;i<blur_images.length;i++) { //removed `=` sign and using `i++` instead of `++i` 
//   ^     ^^ 
     document.getElementById(blur_images[i].id_pic[0]).onclick=blur_func; 
    } 
} 
function blur_func(e) { 
    e = (e || window.event); //get the right event 
    var id = (e.target || e.srcElement).id; //get the clicked image id 
    var blur_image; 
    for(var i=0;i<blur_images.length;i++) { //removed `=` sign and using `i++` instead of `++i` 
    //   ^     ^^ 
     if(id === blur_images[i].id_pic[0]){//got the one clicked 
     blur_image=blur_images[i]; 
     break; 
     } 
    } 
    document.getElementById(blur_image.id_pic[0]).src=blur_image.id_pic[1]; 
}

P.S. используйте ключевое слово var, когда вам нужно объявлять переменные, чтобы избежать непредсказуемого поведения.

источник

2015-05-23 23:11:19 Arvind

Это здорово .... спасибо – repzero

Учитывая, что у вас есть файл-имя предсказуемого, apple.jpg и apple_blur.jpg, я предлагаем вам воспользоваться addEventListener() методом, который позволяет передать узел, который получил событие, а просто изменить его src свойства:

function toggleBlur() { 
    // caching the node, and its src property 
    // to avoid repeated look-ups: 
    var image = this, 
     source = image.src; 

    // if the string of the src property _does not_ contain '_blur' 
    // indexOf() will return -1 
    if (source.indexOf('_blur') === -1) { 

     // replacing the file-type '.jpg' with 
     // the supplied '_blur.jpg': 
     image.src = source.replace('.jpg', '_blur.jpg'); 
    } 
    else { 
     // replacing '_blur.jpg' with '.jpg': 
     image.src = source.replace('_blur.jpg', '.jpg'); 
    } 
} 

// retrieving all <img> elements from the document: 
var images = document.getElementsByTagName('img'); 

// iterating over those <img> element nodes with a for loop: 
for (var i = 0, len = images.length; i < len; i++) { 
    // binding the toggleBlur function as an event-listener 
    // for the 'click' event: 
    images[i].addEventListener('click', toggleBlur); 
}

Чтобы сделать его немного короче, вы можете использовать следующее, который делает точно то же самое:

function toggleBlur() { 
    // caching the node, and its src property 
    // to avoid repeated look-ups: 
    var image = this, 
     source = image.src; 

    // using a conditional operator, known as a 'ternary,' to 
    // perform an assessment (as above); if the assessment is 
    // true or truthy we perform the action betwee the '?' and 
    // ':' characters, otherwise false or falsey we perform 
    // the code following the ':' character. Once either action 
    // is completed the result is passed as the new value of 
    // image.src: 
    image.src = source.indexOf('_blur.jpg') === -1 ? source.replace('.jpg','_blur.jpg') : source.replace('_blur.jpg', '.jpg'); 
} 

// retrieving all <img> elements from the document, 
// and converting the NodeList to an array, using 
// Array.prototype.slice, along with Function.prototype.call: 
var images = Array.prototype.slice(document.getElementsByTagName('img'), 0); 

// iterating over those <img> element nodes using 
// Array.prototype.forEach(): 
images.forEach(function (image) { 
    // 'image' here is the DOM Node from the Array over 
    // which we're iterating: 
    image.addEventListener('click', toggleBlur); 
});

Чтобы использовать – вполне разумный – объектно-ориентированный подход, хотя, я хотел бы предложить:

// here we store the blurred and non-blurred states together: 
var imageObject = { 
    'apple' : 'apple_blur', 
    'apple_blur' : 'apple', 
    'mango' : 'mango_blur', 
    'mango_blur' : 'mango', 
    'pineapple' : 'pineapple_blur' 
}; 

function toggleBlur() { 
    // caching the <img> element node: 
    var image = this, 

    // here we use getAttribute() to get the attribute value, 
    // as using image.src returns the full absolute URL and we only need 
    // the file-path (assuming your image element's HTML remains as- 
    // written in your posted code), we then replace the '.jpg' with 
    // an empty string, to remove the file-type: 
     source = image.getAttribute('src').replace('.jpg', ''); 

    // setting the 'src' attribute, with setAttribute(), to 
    // the value associated with the current attribute-value 
    // in the imageObject: 
    image.setAttribute('src', imageObject[source]); 
} 

var images = Array.prototype.slice.call(document.getElementsByTagName('img'), 0); 

images.forEach(function (image) { 
    image.addEventListener('click', toggleBlur); 
});

Ссылки:

источник

2015-05-23 23:34:51

Я думаю, вы никогда не видели «этот» указатель? Как насчет этого примера?

<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title> I'm alive! </title> 
 
<script> 
 
window.onload = function() { 
 
    var images = document.getElementsByClassName("fruit"); 
 
    
 
    for(var i = 0 ; i < images.length ; i++) { 
 
    images[i].onclick = function() { 
 
     this.src = this.getAttribute("data-blur"); 
 
    } 
 
    } 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<img class="fruit" src="apple.jpg" data-blur="blur_apple.jpg"></img> 
 
<img class="fruit" src="mango.jpg" data-blur="blur_mango.jpg"></img> 
 
<img class="fruit" src="pineapple.png" data-blur="blur_pineapple.jpg"></img> 
 
</body> 
 
</html>

источник

2015-05-23 23:57:42

Обработка событий в Javascript

ответ

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