0

我有 javascript 的问题。我需要为页面中的所有 img 标签添加 onclick 侦听器，因此单击图像应调用 imageClicked 并将元素传递给函数。但是这段代码一直通过 img src="../images/3.jpg" 来运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body onload="start()">
<script type="text/javascript">
    function start(){
        var images = document.getElementsByTagName("img");
        for ( var i = 0; i < images.length; i++) {
            var image=images[i];
            image.addEventListener('click', function(){
                imageClicked(image);
            });
        }
    }
    function imageClicked(image){
        alert(image.src)
    }
</script>
<div id="main">
    <div id="center">
        <button>نمایش اسلایدی</button>
    </div>
    <div id="gallery">
        <div id="img1" class="image">
            <img src="../images/1.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img2" class="image">
            <img src="../images/2.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img" class="image">
            <img src="../images/3.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
    </div>
</div>

4

2 回答 2

3

That is because of the scope. Everytime you loop the image value is set again. And so it will always pass the last image in the loop.

You can do 2 thing. Use the this like below. Or create an anonymouse function.

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}

// Or even better

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', imageClicked);
    }
}
function imageClicked(){
    alert(this.src); // this refers to the image
}

Anonymouse function:

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        (function(image){
            image.addEventListener('click', function(){
                imageClicked(image); // Use the element clicked object (this)
            });
        })(images[i]);
    }
}
于 2013-03-09T17:33:22.693 回答
0

你想要的是这样的：

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}
function imageClicked(image){
    alert(image.src)
}

在您编写的代码中，您复制了图像元素，然后将 eventListener 分配给对象的副本。因为这个副本被多次覆盖，所以 imageClicked 被唯一没有被覆盖的图像引用，最后一个图像。这this 是在回调函数中引用实际的图像元素。

于 2013-03-09T17:39:44.303 回答