1

HTMLで小さなギャラリーを作成していますが、問題が発生しています。繰り返すたびに作成するforループがあります。img問題は、すべての画像を作成し、クリックした画像を表示する他の関数に一意の変数を渡そうとすると、渡すことができる一意の値がないことです。

私はおそらくそれをうまく説明していませんが、それを実行すると、私が何を意味するのかがわかります。各サムネイルの一意の識別子を取得する方法を理解するための助けをいただければ幸いです。

以下はコードです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script>
function loadPictures(){
    var a = new Array();

    a[0] = '1-m';
    a[1] = '2-m';
    a[2] = '3-m';

    document.getElementById('inWin').innerHTML='<img src="images/1-m.png" width="620px" height="auto" />';

    var ci = document.getElementById('pics');
    var newImg, divIdName;

    for(x=0; x<a.length; x++)
    {
        newImg = document.createElement('img');
        divIdName = 'portrait'+x;
        newImg.setAttribute('id',divIdName);
        newImg.setAttribute('src', 'images/' + a[x] + 'thumb.png');
        newImg.setAttribute('onclick','changeContent(x);'); // for FF
        newImg.onclick = function() {changeContent(x);}; // for IE
        ci.appendChild(newImg); 
    }
}   
</script>

<script>
function changeContent(num){
    alert(num);
    var a = new Array();
    x=num;
    a[0] = '1-m';
    a[1] = '2-m';
    a[2] = '3-m';

    document.getElementById('inWin').innerHTML='<img src="images/'+ a[x] +'thumb.png" width="620px" height="auto" />';
}
</script>
</head>
<body onload="loadPictures()">
<div id="inWin">
</div>
<div id="pics">
</div>
</body>
</html>

私は新会員なので画像をアップロードできません。申し訳ありません。

4

1 に答える 1

1

各画像には、一意の識別子である ID 属性が既にあります。これをさまざまな方法で処理して、必要なものを取得できます。これがどのように見えるかのアイデアです：

<script>

var a = [ '1-m',
          '2-m',
          '3m'
        ];
function loadPictures(){

    document.getElementById('inWin').innerHTML='<img src="images/1-m.png" width="620px" height="auto" />';

    var ci = document.getElementById('pics');
    var newImg, divIdName;

    for(x=0; x<a.length; x++)
    {
        newImg = document.createElement('img');
        divIdName = 'portrait'+x;
        newImg.setAttribute('id',divIdName);
        newImg.setAttribute('src', 'images/' + a[x] + 'thumb.png');
        if(document.addEventListener)
            newImg.addEventListener('click', changeContent, false);
        else if(document.attachEvent)
            newImg.attachEvent('onclick', changeContent);
        ci.appendChild(newImg); 
    }

}   

function changeContent(){

    x = this.id.split('portrait')[1];

    document.getElementById('inWin').innerHTML='<img src="images/'+ a[x] +'.png" width="620px" height="auto" />';
}
</script>
于 2012-12-04T14:40:26.707 に答える