Question

我一直在用一块墙敲打我的头几个小时 - 没有运气。简而言之，我似乎无法从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'});

    }));
});

所需图像消失，但'next（）'图像不显示。什么是重要的想法？这是环境：

<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动态创建的事实有关？值得注意的是，动态创建的元素的迭代仅在图像加载后才开始。

感谢。

Answer 1

其inline而非in-line

$(this).next().css({'display':'inline'});

使用.next（）的奇怪行为和使用jQuery的简单幻灯片

1 个答案: