0

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

我遇到的问题是，当我单击上一个或下一个按钮时，divs 完美地重新排序，但相应的变量不反映新的 "active" div。例如，应该在单击按钮后activeAlbumID保留。discovery-soundsspace-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

4

1 回答 1

0

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

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

更新了分叉的 CodePen

于 2018-07-23T00:32:42.803 回答