jQuery页面加载时根据按钮display状态隐藏按钮失效问题排查

我是jQuery新手，希望在页面加载完成后，当id为Email的按钮display属性为inline时，隐藏id为Continue的按钮。但打开HTML文件后仅弹出“page Loaded”提示，后续逻辑未执行，相关代码如下：

相关代码 #

JavaScript代码 #

$(document).ready(function() {
  function hideButton() {
    alert("page Loaded");
    if ($('#Email').css('display') == 'inline') {
      alert("found send email button.  Now watch the Continue button disappear.");
      $("#Continue").css({
        display: "none",
        visibility: "hidden"
      });
      $("#Continue").hide();
    }
  };
  hideButton();
});

CSS代码 #

.sendEmailButton {
  background-color: yellow;
}

.continueButton {
  background-color: pink;
}

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>On page load the button "Continue" will display after page loaded</p>
<div> <button class="sendEmailButton" id="Email" type="button" style="display: inline;">Send Email</button></div>
<br>
<div> <button class="continueButton" id="Continue" type="button" style="display: inline;">Continue</button></div>

我期望“Continue”按钮在弹出“page loaded”提示后消失，请问哪里出错了？

问题根源 #

jQuery的.css('display')方法返回的结果可能和你预期的不一致。按钮属于替换元素，即便你手动设置了style="display: inline;"，部分浏览器实际返回的display值仍可能是inline-block（这是浏览器对按钮的默认渲染规则），导致你的条件判断$('#Email').css('display') == 'inline'不成立，后续隐藏按钮的逻辑也就无法执行。

修复方案 #

推荐两种可靠的解决方式：

方式1：使用is(':visible')判断元素可见性（优先推荐） #

这种方法会自动处理所有影响元素可见性的因素（包括display、visibility、opacity、父元素是否可见等），比直接判断display属性更鲁棒：

$(document).ready(function() {
  function hideButton() {
    alert("page Loaded");
    if ($('#Email').is(':visible')) {
      alert("found send email button.  Now watch the Continue button disappear.");
      $("#Continue").hide(); // hide()方法已内置设置display:none，无需额外css操作
    }
  };
  hideButton();
});

方式2：直接检查行内样式字符串 #

如果你确实需要严格判断行内样式中的display: inline，可以通过获取行内样式字符串来判断：

$(document).ready(function() {
  function hideButton() {
    alert("page Loaded");
    if ($('#Email').attr('style').includes('display: inline')) {
      alert("found send email button.  Now watch the Continue button disappear.");
      $("#Continue").hide();
    }
  };
  hideButton();
});

额外优化点 #

• 你原本代码中同时设置css({display: "none", visibility: "hidden"})和.hide()是冗余的，.hide()方法已经会将元素的display设置为none，完全可以去掉手动修改css的代码。
• 若要让元素彻底不可见，.hide()已经足够满足需求，不需要额外设置visibility: hidden。

内容的提问来源于stack exchange，提问作者Sam Szeto