Question

我正在尝试创建一个简单的图像交换器。所以我在页面上有20个图像，还有1个大图像。我希望用户点击20中的一个较小的图像，然后将其输出到大图像源的位置。

我刚开始，但即使如此，我的代码似乎也没有验证，因为脚本在进入console.log之前就失败了。还不确定我是否正确使用thisID。

<img id='avatar-output' onclick='selectAvatar(thisID)' src='images/avatars/$number.png' />
<script>
    function selectAvatar(thisID){
        var imageSource = document.getElementById ("avatar-output").src;
        console.log("Avatar source is " imageSource);
    }
</script>

Answer 1

HTML：

<img id='avatar-output' src='images/avatars/$number.png' />
<img class='avatar-small' src='images/avatars/1.png' />
<img class='avatar-small' src='images/avatars/2.png' />
<img class='avatar-small' src='images/avatars/3.png' />

JS：

var els = document.getElementsByClassName('avatar-small'),
    target = document.getElementById("avatar-output"),
    handler = function() {   target.src = this.src;    };
for (var i=0; i<els.length; ++i) els[i].onclick = handler;

Demo

或者，如果所有小图像都在一起，最好使用事件委派：

var target = document.getElementById("avatar-output");
document.getElementById("avatar-small-wrapper").onclick = function(e) {
    if(e.target.tagName.toLowerCase() === 'img')  target.src = e.target.src;
};

Demo

备注

更好地分离内容（html）和行为（内联JS）

<script>元素需要type="text/javascript"属性

避免在全局范围内运行JavaScript以避免创建全局变量，从而污染window。在封闭中运行：(function(){ /* code here */ })()

Answer 2

你有一个拼写错误，改变

var imageSource = document.getElementById ("avatar-output").src;

到

var imageSource = document.getElementById("avatar-output").src;

因为它不应该有空间。

编辑：哦和

中的另一个

console.log("Avatar source is " imageSource);

线。在字符串和变量之间添加+，如下所示：

console.log("Avatar source is " + imageSource);

单击图像的Javascript图像src

2 个答案: