几个小时以来,我一直在用这个把头撞到墙上——不走运。简而言之,我似乎无法从 next() jQuery 方法中获得所需的功能。我试图在单击图像时显示 DOM 中的下一个 img 标签。
$(images).each(function(i){
$('#images').append($(this).css({
'display':(i) ? 'none' : 'in-line'
}).click(function(){
$(this).next().css({'display':'in-line'});
$(this).css({'display':'none'});
}));
});
所需的图像消失了,但没有显示“下一个()”。有什么大主意?下面是环境:
<div id="images">
<img src="imgs/1.jpg" style="width: 333.33333333333337px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666669px; display: none; ">
<img src="imgs/2.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
<img src="imgs/3.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
<img src="imgs/4.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; ">
<img src="imgs/7.jpg" style="width: 500px; height: 333.3333333333333px; position: absolute; top: 50%; left: 50%; margin-top: -166.66666666666666px; margin-left: -250px; display: none; ">
</div>
这与这些元素是通过 jQuery 动态创建的事实有关吗?值得注意的是,动态创建的元素的迭代仅在图像加载后才开始。
谢谢。