javascript – So erhalten Sie die vorherigen und nächsten Werte des Klickereignisses.

Question

for (var i = 0; i < pic.length; i++) {
        pic[i].onclick = function () {
            var aA = this.getAttribute("href");
            return false;
        }
    }

Die for-Schleife wurde durchlaufen, um das Click-Ereignis zu binden. Wenn Sie auf Bild 1 klicken, können Sie bereits den Wert von href im Label abrufen (Hinweis: href ist der Sprunglink im A-Label und die Rückgabe von false soll vermieden werden (Springen). Jetzt möchte ich die href-Werte des vorherigen Etiketts und des nächsten Etiketts abrufen, wenn auf das aktuelle Muster geklickt wird, sodass das mittlere Bild Muster 1, das linke Muster Muster 4 und das rechte Muster Muster anzeigt 2. Wie funktioniert die Bedienung?

Answer 1

for (var i = 0; i < pic.length; i++) {
    pic[i].index=i;
    pic[i].onclick = function () {
        var aA = this.getAttribute("href");
        //如果当前是第一个，没有上一个，值获取下一个
        if(this.index===0){
            var aANext=pic[this.index-1].getAttribute("href");
        }
        //如果当前是最后一个，没有下一个，只获取上一个
        else if(this.index===pic.length-1){
             var aAPrev=pic[this.index-1].getAttribute("href");
        }
        //否则上下都获取
        else{
            var aAPrev=pic[this.index-1].getAttribute("href");
            var aANext=pic[this.index-1].getAttribute("href");
        }
        
        
        return false;
    }
}

Answer 2

谢谢，你这种方法很好，在元素，及相邻的元素设置一个index的属性，我看明白了
我现在是这样写的，不过还要出来，如何让点第一个的时候出现第四个图
<script>

var pic = document.getElementById('pic').getElementsByTagName('a');
var pid = document.getElementById('pid').getElementsByTagName('img');
for (var i = 0; i < pic.length; i++) {
    pic[i].onclick = function () {
        var aA = this.getAttribute("href");
        var pid = document.getElementById('pid');
        pid.setAttribute("src", aA);
        var aB = this.parentNode.previousSibling.firstChild.getAttribute('href')
        pid.previousSibling.setAttribute('src', aB);

        var aC = this.parentNode.nextSibling.firstChild.getAttribute('href')
        pid.nextSibling.setAttribute('src', aC);

        return false;
    }
}

</script>