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 回答