Question

我在多个div中有21个图像。以下是图像的示例。

<img src="fruits/lychee.png" class ="fruit" id="fruitl156">
<img src="fruits/cranberry.png" class ="fruit" id="fruitl141">
<img src="fruits/avocado.png" class ="fruit" id="fruitl214">

当页面加载3到6个随机图像时将会可见。现在我希望能够通过其ID了解哪些图像可见。所以基本上我想将每个可见图像的id传递给函数。

这就是我所做的。但它没有像预期的那样做。并非所有可见图像ID都被传递。如何识别可见图像并能够将每个ID传递到passFunction()？

$('#getIDs').click(function(){
   if( $('.fruit').css('visibility', 'visible') ){
       passFunction( $(this.id) );
   }
});

Answer 1

尝试在文档加载时使用此伪:visible（假设图像是在文档加载时随机创建的），如下所示：

$('.fruit:visible').each(function(){
       passFunction( $(this).attr("id") );
});

Answer 2

使用以下方法可以轻松完成：visible和.each（）

$('#getIDs').click(function(){
    $('.fruit:visible').each(function (){
       passFunction( $(this.id) );
   });
});

但是

：可见选择器可能不会选择所有“不可见”图像。（示例图像可见但在屏幕外）

Answer 3

正如leonid所提到的，如果您的代码显示/隐藏图像元素，您可以使用：带有上述任何代码示例的可见选择器。您还需要了解图像的显示/隐藏方式。如果它由不透明度或可见性css样式控制，即使未在屏幕上显示，它也会出现在可见图像ID中。如果它有css样式作为display：none它不会被捕获：可见选择器，这是我在jquery可见选择器示例中注意到的。您可以参考https://api.jquery.com/visible-selector/

传递可见图像的ID

3 个答案: