У меня есть страница, которая в основном имеет четыре эскиза изображения в тегах <ul>
. Ниже приведена другая область изображения. Когда вы нажимаете миниатюру, отображается полное изображение
<body>
<h1>Image Gallery</h1>
<ul>
<li><img class="preview" src="images/blue.jpg" title="blue"></li>
<li><img class="preview" src="images/red.jpg" title="red"></li>
<li><img class="preview" src="images/yellow.jpg" title="yellow"></li>
<li><img class="preview" src="images/green.jpg" title="green"></li>
</ul>
<h2>Picture Description</h2>
<img id="large" src="images/blue.jpg">
</body>
Код JS находится здесь:
var preview=document.getElementsByClassName("preview")
var target=document.getElementById("large")
var desc=document.getElementsByTagName("h2")[0]
for (var i=0;i<preview.length;i++) {
function showpic() {
target.src=preview[i].src
target.innerHTML=preview[i].title
}
preview[i].onclick=showpic
}
Вы были рядом! Проблема с определением функции в таком цикле состоит в том, что все клики запускали последнюю версию функции. Использование this
позволяет избежать этой проблемы, поскольку нам нужно только один раз определить showpic
.
function showpic(){
var target=document.getElementById("large")
target.src=this.src
target.innerHTML=this.title
}
var preview=document.getElementsByClassName("preview")
var desc=document.getElementsByTagName("h2")[0]
for (var i=0;i<preview.length;i++) {
preview[i].onclick=showpic
}
EDIT Есть что-то, что вы также можете сделать, это ближе к вашему стилю программирования, я думаю:
var preview=document.getElementsByClassName("preview")
var target=document.getElementById("large")
var desc=document.getElementsByTagName("h2")[0]
for (var i=0;i<preview.length;i++)
{
preview[i].onclick=function(event1){
target.src=event1.srcElement.src
target.innerHTML=event1.srcElement.title
}
}
try this.
var preview=document.getElementsByClassName("preview")
var target=document.getElementById("large")
var desc=document.getElementsByTagName("h2")[0]
for (var i=0;i<preview.length;i++)
{
preview[i].onclick=showpic();
}
function showpic(){
target.src=preview[i].src
target.innerHTML=preview[i].title
}