javascript - 如何在检测到 CSS 显示 block 时执行 JQuery 函数

Question

单击“注册 DIV”时，我有一个包含两种类型消息的 HTML 代码。单击“注册错误”时，将显示错误消息。单击注册成功后，将显示成功消息。默认情况下，这些消息设置为显示:无。

我的目标输出是创建一个单独的 jQuery 函数“detectDisplay()”，它“仅在成功消息具有 CSS 代码显示时执行: block ”。

下面是我的代码。任何帮助表示赞赏。谢谢。

CSS:

.cs_error { display: none; }
.cs_success { display: none; }

HTML:

<div class="cs_signUp" onclick="showError(); detectDisplay();">Sign up &raquo; error </div>
<div class="cs_signUp" onclick="showThanks(); detectDisplay();">Sign up &raquo; success </div>
<br/>
<div class="cs_success">
    <div>Thank you for signing up!</div>
</div>
<div class="cs_error">
    <div>Invalid input! Please try again!</div>
</div>

脚本:

function showError() {
    $(".cs_success").css("display","none");
    $(".cs_error").css("display","block");
}

function showThanks() {
    $(".cs_error").css("display","none");
    $(".cs_success").css("display","block");
}

function detectDisplay() {

}

Answer 1

您可以检查元素是否可见？

if($('.cs_success').is(':visible')){
  //do stuff
}