.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