Question

我有一个元素<p id="message" class="hidden">...</p>

我的CSS：

.hidden{
   display:none;
}
.show{
   display:block;
}

问题：我需要在JQUERY中提供帮助，以检查该元素是隐藏还是显示。如果显示，请在2秒后隐藏它（可能是淡出）。我需要帮助检查元素的类是否有效。我不知道如何继续

当前的JQuery：

$(function() {
        setTimeout(function() {
            $("#message").hide('blind', {}, 500)
        }, 2000);
    });

Answer 1

您可以使用以下

检查元素是否可见

$(element).is(":visible")

取自https://api.jquery.com/visible-selector/

visibility: hidden或opacity: 0的元素被认为是可见的，因为它们仍占用了布局中的空间。

您可以执行以下操作

if($("#message").is(":visible"))
{
    $("#message").delay(2000).fadeOut();
}

Answer 2

您可以使用：

$('#message:visible').delay(2000).hide('fade');

演示：http://jsfiddle.net/CxL5W/1

Answer 3

使用.hasClass()检查是否有.hidden或.show

Answer 4

您也可以使用
$(".hidden").css("display")
或
$("#message").css("display")

在if / else语句中检查对象是否已经可见，或者不是见css method - jquery API

Answer 5

两种方式：

if ($('p').hasClass('hidden') == true) { 
//Script if it's hidden
}
else {
//Script if it's visible
}

或者

if ($('p').css('display') == 'block') {
//Script if it's visible
}
else {
//Script if it's hidden
}

Answer 6

如果要检查元素是否具有类$(selector).hasClass('yourClass');

那么简单

我已使用setInterval调整了您的代码，因此您可以清楚地看到hasClass的工作原理。

var $message = $('#message');

setInterval(function() {
  if($message.hasClass('show')) {
      $message.removeClass('show');
      $message.fadeOut('slow',function() {
          $message.addClass('hide');
      });
  } else {
      $message.removeClass('hide');
      $message.fadeIn('slow',function() {
          $message.addClass('show');   
      });
  }
}, 2000);

Fiddle

Answer 7

你可以检查这样的可见性

$(document).ready(function(){
    if ($('#myDiv').is(":visible"))
    {
        //visible do some than
    }
    else
    {
        //not visible do some else
    }
});

<强> JSFIDDLE

Jquery检查元素显示状态然后隐藏它

7 个答案: