【发布时间】：2018-07-22 05:22:28
【问题描述】：
我有一堆divs，我以轮播方式设置。单击“下一个”或“上一个”按钮时，使用 JQuery I .append() 或 .prepend() 和 div 到堆栈的顶部或底部。顶部/可见的div 是“活动的”div，对应于类似名称的id 属性的<iframe>。当div 在单击下一个/上一个按钮后变为“活动”时，我希望我的 Javascript 从相应的<iframe> 中提取src 属性值，以便我可以在程序的其他地方使用它。
我遇到的问题是，当我单击上一个或下一个按钮时，divs 重新排序完美，但相应的变量不反映新的“活动”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');
});
}
});
});因此，例如，当我单击“上一个”按钮时，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【问题讨论】：
-
点击时，您附加或预先添加元素。但是您拥有的所有
var都在load上定义...并且在那之后不要更改。这就是问题所在。脚本编码就像和一个白痴说话。你必须明确定义每一件事。不要以为它会明白这一点。 -
是的，所有变量都是在“加载”时定义的，但“专辑”节点是通过单击按钮更新的。这在我打印到控制台 console.log(album[7]) 时反映出来。返回应有的“空间声音”。为什么“专辑”更新了，之后什么都没有？我想我误解了 javascript 如何更新变量。
-
对没有代码格式的评论表示歉意，所以在 5 分钟后将我锁定为无法编辑：
console.log(album[7])space-soundsalbums -
我想你没有发布所有的标记...因为我找不到
<i id="prev">...这是一个CodePen 发布的内容。你能fork并完成它吗？ -
这里是my fork。点击左边的“previous”箭头查看第二组输出。
标签： javascript jquery html append htmlcollection