Question

当我点击一个按钮时，我想将一些jQuery（让我们说 fadeOut ）应用到第一个带有 my-image 类的图像。

当我再次点击该按钮时，我想对带有 my-image 类的图像标记中的 next 事件做同样的事情。

图像全部出现在整个标记的不同位置，不一定是兄弟姐妹。

感谢您的帮助。

Answer 1

虽然未经测试，但您可以利用可见和第一个 psuedo选择器。

$('#mybutton').click(function(){
    $('.my-image:visible:first').fadeOut();
}

如果您的功能是动画使用不和动画以确保您不匹配当前渐变的功能：

$('#mybutton').click(function(){
    $('.my-image:visible:not(:animated):first').fadeOut();
})

为了完善我们对过滤器方法的理解，我也尝试了长手。

$('#mybutton').click(function(){
    $('.my-image')
    .filter(':visible')
    .not(':animated')
    .filter(':first')
    .fadeOut();
})

这在开发过程中特别有用，可以快速注释掉各个步骤：

$('#mybutton').click(function(){
    $('.my-image')
    .filter(':visible')
//    .not(':animated')
    .filter(':first')
    .fadeOut();
})

Answer 2

你可以有两个班级。一个用于已经淡出的图像，另一个用于那些没有的图像。像：

<img src="" alt="" class="not_faded" />

和

<img src="" alt="" class="faded" />

现在使用jQuery，您可以执行以下操作：

$('#mybutton').click (function (){
    $('.not_faded:first').fadeOut (); // your fade out effect
    $('.not_faded:first').attr ('class', 'faded');
});

此代码获取属于not_faded类的第一个图像并生成淡出效果。然后将该图像的类更改为“褪色”。因此，下一次类not_faded的第一个图像将是第二个。

编辑：查看Matt的解决方案，它更优雅，并充分利用jQuery。

使用jQuery定位某个类的图像？

2 个答案: