Question

我正在用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>

由于我是新会员，我无法上传图片，抱歉。

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

createElement唯一标识符

1 个答案: