我如何检查是否在jQuery 中隐藏了元素 ?

如何使元素的可见度.hide(), .show(),或.toggle()?

如果一个元素是visible或hidden?

当前回答

公平地说,问题在日期之前这笔回答。

我不是要批评《任择议定书》,而是要帮助任何仍在提出这一问题的人。

确定某物是否可见的正确方法是咨询你的视觉模型;

如果你不知道这意味着什么那你就要踏上发现之旅让你的工作变得不那么困难了

以下是对示范 -- -- 观观 -- -- 模型建筑(MVVM)。

击出JS是一个具有约束力的图书馆, 它会让您在不学习整个框架的情况下尝试这些。

这里有一些 JavaScript 代码和一个DIV 可能可见也可能看不到。

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
    var vm = {
        IsDivVisible: ko.observable(true);
    }
    vm.toggle = function(data, event) {
      // Get current visibility state for the div
      var x = IsDivVisible();
      // Set it to the opposite
      IsDivVisible(!x);
    }
    ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>

请注意,切换函数不与国防部协商确定 div 的可见度;它参考视觉模型。

2017-03-25 08:49:30

其他回答

如何如何元素可见度和jQuery 工作;

元素可以隐藏display:none, visibility:hidden或opacity:0这些方法之间的差异:

display:none隐藏元素,且不占用任何空间;
visibility:hidden隐藏元素,但它在布局中仍然占据空间;

opacity:0将元素隐藏为“ 可见性: 隐藏” , 它仍然占载着布局的空间; 唯一的区别在于不透明让一个元素部分透明;

if ($('.target').is(':hidden')) {
  $('.target').show();
} else {
  $('.target').hide();
}
if ($('.target').is(':visible')) {
  $('.target').hide();
} else {
  $('.target').show();
}

if ($('.target-visibility').css('visibility') == 'hidden') {
  $('.target-visibility').css({
    visibility: "visible",
    display: ""
  });
} else {
  $('.target-visibility').css({
    visibility: "hidden",
    display: ""
  });
}

if ($('.target-visibility').css('opacity') == "0") {
  $('.target-visibility').css({
    opacity: "1",
    display: ""
  });
} else {
  $('.target-visibility').css({
    opacity: "0",
    display: ""
  });
}

有用的 jQuery 切换方法 :

$('.click').click(function() {
  $('.target').toggle();
});

$('.click').click(function() {
  $('.target').slideToggle();
});

$('.click').click(function() {
  $('.target').fadeToggle();
});

2012-04-24 21:04:11

if($("h1").is(":hidden")){
    // your code..
}

2016-03-23 13:21:42

可以创建一个函数来检查可见度/显示属性,以便测量该元素是否显示在界面中。

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

中小工作

2014-08-29 20:20:35

Demo 链接

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

来源(来自我的博客):

博客 Plug n Play - jQuery 工具及部件: 如何使用 jQuery 查看元素是否隐藏或可见 ?

2013-01-25 05:34:11

您需要同时检查显示和可见度 :

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

如果我们检查$(this).is(":visible"),j 查询自动检查这两个东西。

2014-01-31 06:24:04

我如何检查是否在jQuery 中隐藏了元素 ?

推荐文章

最新文章

标签