检查具有相同类名的img是否用jquery隐藏答案

【问题标题】：check if img with same class name is hide with jquery检查具有相同类名的img是否用jquery隐藏
【发布时间】：2018-01-16 16:50:39
【问题描述】：

我在 html 中有多个具有相同类名的 img。任何方式我都可以检查具有相同类名的 img 是否被 jquery 隐藏。

示例：我在 html 中有以下图像代码

<img src='test1.jpg' class='test' style='display:inline;'>
<img src='test2.jpg' class='test' style='display:none;'>
<img src='test3.jpg' class='test' style='display:inline;'>
<img src='test4.jpg' class='test' style='display:none;'>

如何使用 jquery 查找所有隐藏的图像？

【问题讨论】：

标签： jquery

【解决方案1】：

鉴于您的 HTML（已更新为在每张图片上包含一个 id 属性），这是一个潜在的解决方案。

https://jsfiddle.net/eulloa/36gfwk6k/1/

$(function(){
    console.log(isImgVisible($('#img-1')));
    console.log(isImgVisible($('#img-2')));
    console.log(isImgVisible($('#img-3')));
    console.log(isImgVisible($('#img-4')));
})

function isImgVisible(img) {
    if (img.is(':visible'))
    return true;

  return false;
}

【讨论】：

【解决方案2】：

查看是否所有图像都被隐藏（或哪些图像被隐藏）：

$(".test").each(function() {
  if( $(this).is(":hidden") ) {
    // Current image is hidden, do something
    break;
  }
}

如果if 子句中的代码未运行，则所有图像都被隐藏。

【讨论】：

【解决方案3】：

试试这个：

$(document).ready(function(){
 $("#view").click(function(){
 //alert("")
 var isVissable;

isVissable = $("#test_one").is(':hidden')
 console.log( isVissable)
  isVissable = $("#test_two").is(':hidden')
  console.log( isVissable)
   isVissable = $("#test_three").is(':hidden')
   console.log( isVissable)
  isVissable = $("#test_four").is(':hidden')
   console.log( isVissable)


 })


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='test1.jpg' id='test_one' class="test" style='display:inline;'>
<img src='test2.jpg' id='test_two'class="test"  style='display:none;'>
<img src='test3.jpg' id='test_three' class="test"  style='display:inline;'>
<img src='test4.jpg' id='test_four' class="test"  style='display:none;'>

<button id="view"> view </button>

【讨论】：

【解决方案4】：

你可以使用下面的sn-p来检查test类的所有图片是否都被隐藏了

function checkIfAllHidden() {
  var allHidden = true;
  $(".test").each(function(e) {
    allHidden &= $(this).is(":hidden");
  });
  return Boolean(allHidden);
}

【讨论】：