在 Firefox 中加载 JQuery 对象的序列与在 Chrome/Opera 中不同？答案

【问题标题】：Loading Sequence of JQuery objects in Firefox different than in Chrome/Opera?在 Firefox 中加载 JQuery 对象的序列与在 Chrome/Opera 中不同？
【发布时间】：2018-02-05 12:36:09
【问题描述】：

在 Firefox 上执行时，我遇到了 HTML 和 Javascript 文件中 jQuery 对象的加载顺序问题。我有几个<div> 和<button> 标签与不同的id。该页面以以下代码开头：

<script>
$(document).ready(function () {
   $("#id_1").show();
   $("#id_2").hide();
   $("#id_3").hide();
   ...
});

$(document).ready(function () {
   $.getJSON("JSON_file.json", function (json) {
      if (json.option[number] == "b") {
         $("#id_2").show()
      };

      if (json.option[number] == "c") {
         $("#id_3").show()
      };
   });
});
</script>

在 Chrome 和 Opera 中，我对此代码没有任何问题。对象“#id_2”和“#id_3”在加载时不可见。然而，在 Firefox 中，“#id_2”和“#id_3”在被隐藏之前都是可见的。但我不希望它们在一开始就可见。

我使用 localhost 打开文件。

有人知道我做错了什么吗？

【问题讨论】：

使用 CSS 而不是 jQuery 隐藏元素

标签： javascript jquery html loading show-hide

【解决方案1】：

您好，您可以在 div 中添加默认隐藏调用，然后在基本条件下删除该调用。喜欢

<div id="#id_1" class='hide'>
My Div 1
</div>
<div id="#id_2" class='hide'>
My Div 1
</div>
<div id="#id_3" class='hide'>
My Div 1
</div>

现在你的脚本代码

<script>


$(document).ready(function () {
   $.getJSON("JSON_file.json", function (json) {
      if (json.option[number] == "b") {
         $("#id_2").removeClass('hide')
      };

      if (json.option[number] == "c") {
         $("#id_3").removeClass('hide')
      };
   });
});
</script>

【讨论】：