javascript - html javascript

Question

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>

score 3 · Accepted Answer

それはスコープのせいです。ループするたびに、画像の値が再度設定されます。そのため、常にループの最後の画像を渡します。

あなたは2つのことをすることができます。以下のようなものを使用してくださいthis。または、anonymouse関数を作成します。

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
}

匿名機能：

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]);
    }
}

score 0 · Accepted Answer

あなたが欲しいものはこのようなものです：

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

作成したコードでは、image要素をコピーしてから、オブジェクトのコピーにeventListenerを割り当てました。このコピーは複数回上書きされたため、imageClickedは、上書きされなかった唯一の最後の画像によって参照されました。これthis は、コールバック関数で実際の画像要素を参照するためのものです。

javascript - html javascript

2 に答える 2

Related

Reference