Нажатие кнопок (по одному за раз) и изменение их значков

Question

У меня есть несколько изображений (которые служат в качестве кнопки), которые, если щелкнуть, изменит значок.

<img id = "i1" onClick = "changeImg()" src = "img1.png"> 
<img id = "i2" onClick = "changeImg()" src = "img2.png"> 
<img id = "i3" onClick = "changeImg()" src = "img3.png"> 
..... 

Внутри моей функции, это то, что я пытался сделать:

for(var x = 1; x <=5; x++){ 
    if(document.getElementById("i"+x).src == "img" + x + ".png") 
     document.getElementById("i"+x).src = "pic" + x + ".png") 
} 

Но очевидно, когда я нажал на кнопку (изображение), все остальные кнопки, кажется, щелкнул также (и они все изменили их значки). Я хочу, чтобы, если бы я щелкнул изображение, то это изображение изменит его значок. Аналогично, если я щелкнул другое изображение и так далее ...

Это может показаться простым (но я действительно не могу придумать способ решения: я новичок в программировании - особенно javascript), пожалуйста будь красивой. Спасибо за помощь (в продвинутом виде).

Answer 1

Попробуйте это:

function changeImg(x) { 
    if(document.getElementById("i"+x).src == "img" + x + ".png") 
     document.getElementById("i"+x).src = "pic" + x + ".png") 
} 

HTML:

<img id = "i1" onClick = "changeImg(1)" src = "img1.png"> 

Answer 2

Вам нужно this в каждой функции для обработки с релевантным содержанием.

<img id = "i1" onClick = "changeImg(this)" src = "img1.png"> 

Например, с

function changeImg(tag) { 
    alert(tag); 
    // console.log(tag); 
} 

вы можете увидеть, что this означает в данном случае.

Чтобы получить доступ к src каждому тегу:

function changeImg(tag) { 
    alert(tag.src); 
    // console.log(tag.src); 
} 

я заменил бы IMG с рис с заменить функции:

str.replace(search, replacement); 

Example

Полного Солу Тион:

HTML

<img id = "i1" onClick = "changeImg(this)" src = "img1.png"> 
<img id = "i2" onClick = "changeImg(this)" src = "img2.png"> 
<img id = "i3" onClick = "changeImg(this)" src = "img3.png"> 

JavaScript

function changeImg(tag) { 
    var id = tag.id; 
    var el = document.getElementById(id); 
    var src = tag.src; 
    var newSrc = src.replace("img", "pic"); 
    el.src = newSrc; 
}