.append（）之后，HTMLCollection索引更改未反映在變量中

Question

我有一堆以輪播方式設置的div 。 使用JQuery I，當單擊“下一個”或“上一個”按鈕時，將.append()或.prepend() div移到堆棧的頂部或底部。 頂部/可見div是“活動” div ，它與類似名稱的id屬性的<iframe>相對應。 單擊下一個/上一個按鈕后，當div變為“活動”時，我希望我的Javascript從相應的<iframe>提取src屬性值，以便可以在程序的其他位置使用它。

我遇到的問題是，當我單擊上一個或下一個按鈕時， div重新排序完美，但是相應的變量無法反映新的“ active” div 。 例如， activeAlbumID在單擊按鈕后應為space-sounds discovery-sounds時仍保留discovery-sounds 。

這是我的<html> ：

 <div id='stack'> <div class="album" id="space-sounds"></div> <div class="album" id="vintage-sounds"></div> <div class="album" id="rocket-sounds"></div> <div class="album" id="mercury-sounds"></div> <div class="album" id="kennedy-sounds"></div> <div class="album" id="apollo-sounds"></div> <div class="album" id="shuttle-sounds"></div> <div class="album" id="discovery-sounds"></div> </div> <iframe id="space-widget" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/558303876"></iframe> <iframe id="vintage-widget" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/270811947"></iframe> <iframe id="rocket-widget" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/55326279"></iframe> <iframe id="mercury-widget" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/55323699"></iframe> <iframe id="kennedy-widget" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/55323646"></iframe> <iframe id="apollo-widget" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/55323442"></iframe> <iframe id="shuttle-widget" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/55323280"></iframe> <iframe id="discovery-widget" width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/55322828"></iframe>

這是Javascript：

 $(window).bind("load", function() { var albums = document.getElementsByClassName('album'); var playlists = document.getElementsByTagName('iframe'); var activeAlbum = albums[albums.length - 1]; var activeAlbumID = activeAlbum.id; var activeAlbumPre = activeAlbumID.split('-'); var activePlaylist = activeAlbumPre[0] + '-widget'; var widgetSRC = $('#' + activePlaylist).attr('src'); $('i:nth-child(1), i:nth-child(2)').click(function(){ //Click previous button if (this.id == 'prev'){ //Pull out album from bottom of stack $(albums[0]).addClass('animate-album'); //Wait for animation to finish $(albums[0]).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { //Set explicit element margin $(albums[0]).css('margin-left', '400px'); //Remove animation styles/margin so doesn't re-fire on append $(albums[0]).removeClass('animate-album'); //Put bottom album on top $('#stack').append(albums[0]); //Force browser to calculate margin value $(albums[albums.length - 1]).css('margin-left'); //Transition album back to original position $(albums[albums.length - 1]).css('margin-left', '0px'); }); } else{ //Push album to bottom of stack $(albums[albums.length - 1]).addClass('animate-album'); //Wait for animation to finish $(albums[albums.length - 1]).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { //Set explicit element margin $(albums[albums.length - 1]).css('margin-left', '400px'); //Remove animation styles/margin so doesn't re-fire on prepend $(albums[albums.length - 1]).removeClass('animate-album'); //Put top album on bottom $('#stack').prepend($(albums[albums.length - 1])); //Force browser to calculate margin value $(albums[0]).css('margin-left'); //Transition album back to original position $(albums[0]).css('margin-left', '0px'); }); } }); });

因此，例如，當我單擊“上一個”按鈕時， discovery-sounds被推到堆棧的底部， space-sounds被推到頂部並變得可見，這很好用：

 <div id='stack'> <div class="album" id="discovery-sounds"></div> <div class="album" id="vintage-sounds"></div> <div class="album" id="rocket-sounds"></div> <div class="album" id="mercury-sounds"></div> <div class="album" id="kennedy-sounds"></div> <div class="album" id="apollo-sounds"></div> <div class="album" id="shuttle-sounds"></div> <div class="album" id="space-sounds"></div> </div>

將albums打印到控制台會生成更新且正確的堆棧索引，但隨后的所有變量都會產生原始的“活動”值：

 //Expected console.log(activeAlbum); //<div class="album" id="space-sounds"></div> console.log(activeAlbumID); //spsce-sounds //Actual console.log(activeAlbum); //<div class="album" id="discovery-sounds"></div> console.log(activeAlbumID); //discovery-sounds

Answer 1

在animationend處理程序結束之前，只需“更新”“移動”的元素集合...由於DOM中的追加/前置。

// Renew the albums collection.
albums = document.getElementsByClassName('album');
activeAlbum = albums[albums.length - 1];
activeAlbumID = activeAlbum.id;

更新了分叉的CodePen

.append（）之后，HTMLCollection索引更改未反映在變量中

問題描述

1 個解決方案

解決方案1
0 已采納 2018-07-23 00:32:42

.append（）之后，HTMLCollection索引更改未反映在變量中

問題描述

1 個解決方案

解決方案1 0 已采納 2018-07-23 00:32:42

解決方案1
0 已采納 2018-07-23 00:32:42