js點(diǎn)擊圖片，能有其他方法

用數(shù)組怎么做，特別是到了a點(diǎn)擊指向問(wèn)題
這是代碼：

    body {
        font-family: "Helvetica","Arial",serif;
        color: #333;
        background-color: #ccc;
        margin: 1em 10%;
    }
    h1 {
        color: #333;
        background-color: transparent;
    }
    a {
        color: #c60;
        background-color: transparent;
        font-weight: bold;
        text-decoration: none;
    }
    ul {
        padding: 0;
    }
    li {
        float: left;
        padding: 1em;
        list-style: none;
    }
    #imagegallery {
    }

    #imagegallery a {
        margin: 0px 20px 20px 0px;
        padding: 0px;
        display: inline;
    }

    #imagegallery a img {
        border: 0;
    }
</style>

美女畫(huà)廊

</h2>

<a href="./../images/1.jpg" title="美女A">
    <img src="./../images/1-small.jpg" width="100px" alt="美女1" />
</a>
<a href="./../images/2.jpg" title="美女B">
    <img src="./../images/2-small.jpg" width="100px" alt="美女2" />
</a>
<a href="./../images/3.jpg" title="美女C">
    <img src="./../images/3-small.jpg" width="100px" alt="美女3" />
</a>
<a href="./../images/4.jpg" title="美女D">
    <img src="./../images/4-small.jpg" width="100px" alt="美女4" />
</a>

</div>

var imagegallery = document.getElementById('imagegallery');
var links = imagegallery.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    var link = links[i];
    console.log(link)
    var image = document.getElementById('image');
    var des = document.getElementById('des');
    link.onclick = function () {
        image.src = this.href;
        des.innerText = this.title;

        return false;
    }
}

</script>

script 中這是一種方法，還有用數(shù)組做的

var imagegallery = document.getElementById('imagegallery');
var links = imagegallery.getElementsByTagName('a');
console.log(links)

var arr  = [];
for (var i = 0; i < links.length; i ++) {
    arr.push(links[i].href);
}

var image = document.getElementById('image');
for (var j = 0; j < links.length; j++) {
    var link = links[j];
    link.onclick = function () {

        image.src = arr[j];//**暫時(shí)想不出好方法**

        return false;
    }
}

</script>

有人用取余方式修改數(shù)組序號(hào)可以做出來(lái)，思路想不出來(lái)了（轉(zhuǎn)牛角尖了，）

回答

編輯回答

只愛(ài)你

var image = document.getElementById('image');
for (let j = 0; j < links.length; j++) {

var link = links[j];
link.onclick = function () {

    image.src = arr[j];

    return false;
}

}

用let輕松解決

2018年1月11日 05:08

編輯回答

病癮

使用數(shù)組的forEach循環(huán)都可以

let links = imagegallery.querySelectorAll('a');
let image = document.querySelector('#image');
let des = document.querySelector('#des');
links.forEach(function e(item) {
    item.onclick = function() {
        image.src = this.href
        des.innerText = this.title
        return false;
    }
})

還有在此建議使用querySelector和querySelectorAll選擇器好很多。

2017年5月15日 08:46

編輯回答

青黛色

var image = document.getElementById('image')
Array.forEach.call(document.querySelectorAll('#imagegallery a'),function(){
    image.href = this.parentNode.href
})

2017年11月7日 00:08