HTMLCollection 索引更改未反映在 .append() 之后的变量中

Question

我有一堆 div 以轮播方式设置的。当单击 "next" 或 "previous" 按钮时，使用 JQuery I .append() 或 .prepend() a div 到堆栈的顶部或底部。 top/visible div 是 "active" div 对应于类似命名的 id 属性的 <iframe>。单击 next/previous 按钮后 div 变为 "active" 时，我希望我的 Javascript 从相应的 <iframe> 中提取 src 属性值，因此我可以在程序的其他地方使用它。

我遇到的问题是，当我单击上一个或下一个按钮时，divs 重新排序完美，但相应的变量不反映新的 "active" div.例如，activeAlbumID 在单击按钮后应为 space-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');
      });
    }
  });
 });

例如，当我单击 "previous" 按钮时，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 会生成更新后的正确堆栈索引，但后面的所有变量都会生成原始 "active" 值：

//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 处理程序结束之前，"renew" 元素集合 "move"... 由于 DOM 中的 append/prepend .

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

Updated forked CodePen

HTMLCollection 索引更改未反映在 .append() 之后的变量中

HTMLCollection Index Change Not Reflected in Variables After .append()

html

javascript

jquery

append

htmlcollection