可见图像的传递 ID答案

【问题标题】：Pass IDs of visible images可见图像的传递 ID
【发布时间】：2015-10-26 00:31:24
【问题描述】：

我在多个 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) );
   }
});

【问题讨论】：

是您的代码使图像不可见吗？如果是这样，你如何隐藏/显示它们？
让我为你stackoverflowit stackoverflow.com/q/8774089/5171225
您可能希望使用.each() 遍历每个元素，并使用push 将它们放入可见元素数组中。然后传递那个数组。
@LeonidUsov 谢谢。我试过if( $('.fruit').is(':visible') ) {}，但它不会传递所有可见的图像ID。

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

id 实际上并不重要，因为 (attr 和 prop) 都将具有相同的值，并且不会被任何用户交互操作。 Prop 最好与表单元素一起使用来设置/获取元素值，因为 attr 有时会失败。虽然它肯定可以在这里使用。

【解决方案2】：

这很容易通过 :visible 和 .each() 完成

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

但是

:visible 选择器可能不会选择所有“不可见”图像。（可见但不在屏幕上的示例图像）

【讨论】：

【解决方案3】：

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

【讨论】：