Question

我有一个页面，<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
}

Answer 1

你很亲密！在循环中定义函数的问题是所有的点击都触发了函数的最后一个版本。使用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
}

修改你也可以做一些事情，我认为它更接近你的编程风格：

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 } }

Answer 2

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
}

如何在javascript中使用onclick属性的函数

2 个答案: