Question

我已经尝试了几个小时，试图让我的元素隐藏一个并显示另一个。我的脚本如下：

<script type="text/javascript">

   function () {

       $('#Instructions').hide();
       $('#GodDescription').show();
};
</script>

我不明白为什么一个人都没有工作。默认指令是可见的，而GodDescription则不可见。现在我只是试图让GodDescription可见，当页面出现时隐藏指令。 css文件中的GodDescription有display：none;

我做错了什么，我该怎么办？

感谢您的帮助。

Answer 1

如果您尝试在页面加载时执行此操作，则必须以这种方式编写：

$(function () {

       $('#Instructions').hide();
       $('#GodDescription').show();
});

或：

$(document).ready(function () {

           $('#Instructions').hide();
           $('#GodDescription').show();
    });

说明：

$(function(){ }) （$(document).ready()的简写）告诉您在文档准备好后执行其中的代码。这意味着所有HTML元素都将存在并准备好供JavaScript使用。

根据JQUERY DOCS：

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。只有在页面文档对象模型（DOM）准备好执行JavaScript代码之后， $（document）.ready（）中包含的代码才会运行。包含在 $（window）.load（function（）{...}）中的代码将在整个页面（图像或iframe）（而不仅仅是DOM）准备就绪后运行。

Answer 2

你也可以使用纯javascript，

进行下面的操作

<script type="text/javascript">
   window.onload = function () {
       querySelector('#Instructions').style.display='none';
       querySelector('#GodDescription').style.display='block';
   };
</script>

使用jQuery，您也可以创建自我调用功能。

(function ($) {
       $('#Instructions').hide();
       $('#GodDescription').show();        
})(jQuery);

Answer 3

这是一个纯JavaScript解决方案;）

<script type="text/javascript">
window.onload = function(){
   getDocumentById('Instructions').style.display='none';
   getDocumentById('GodDescription').style.display='block';
   };
</script>

Answer 4

使用vanilla javascript：

//Using Id
var element0 = document.getElementById('name');
var element1 = document.getElementById('name');
element0.style.display = 'none';
element1.style.display = 'visible';

//Using Class
var element = document.getElementsByClassName('name');
for (var i = element.length;i>=0;--i)
    element[i].style.display = 'none';

隐藏/显示元素jquery

4 个答案:

说明：