Question

我有一堆以轮播方式设置的div。单击“下一个”或“上一个”按钮时，使用JQuery I .append()或.prepend()和div到堆栈的顶部或底部。顶部/可见的div是“活动的” div，对应于类似命名的<iframe>属性的id。单击下一个/上一个按钮后，div变为“活动”时，我希望我的Javascript从相应的src中提取<iframe>属性值，以便可以在程序的其他位置使用它

我遇到的问题是，当我单击上一个或下一个按钮时，div会重新排序，但是相应的变量不能反映新的“活动” div。例如，单击按钮后应将activeAlbumID保留为discovery-sounds，space-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>：

$(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');
      });
    }
  });
 });

这是Javascript：

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会生成更新且正确的堆栈索引，但随后的所有变量都将产生原始的“活动”值：

destinationType: this.camera.DestinationType.DATA_URL

Answer 1

在animationend处理程序结束之前，只需“更新”“移动”的元素集合...由于DOM中的追加/添加。

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

Updated forked CodePen

.append（）之后的变量中未反映HTMLCollection索引更改

1 个答案: