如何在 jQuery 中隐藏页面加载时的元素？答案

【问题标题】：How to hide the elements on the onload of a page in jQuery?如何在 jQuery 中隐藏页面加载时的元素？
【发布时间】：2014-03-10 15:46:01
【问题描述】：

以下是我的 HTML 代码：

<div id="entrancelist">
        <h2 class="heading">favourite questions</h2>
        <table cellpadding="0" cellspacing="0" border="0" width="98%" style="padding:5px;" align="center">
          <tbody>

            <tr>
              <td>
                <div class="sub_name" id="" >
                  <div style="height:auto; overflow:hidden; width:100%;">



                            <table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box"> 
                      <tr class="question_info">
                        <td valign="top" width="70%">
                          <b>Question 4.</b></td>
                          <td valign="top" align="left" width="30%">
                          <b><a href ="#" style="margin-right:0px;" class="fav_que" id="93041">Remove From Favourite Question</a></b></td></tr>
                          <tr class="question_info">
                          <td valign="top" colspan="2">
                          <br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

                          </td></tr>
                          <tr class="question_info">
                          <td valign="top"> 
                          <b>Question : </b>
                                                    <br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>The angel between <img align="middle" class="Wirisformula" src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=527931a5749cffe312c126871736b88d.png"><br></p></body></html>
                                                                            </td>
                        <td valign="bottom" align="right"><b>QUE93041</b></td>
                      </tr>
                        <tr class="question_info">                    
                          <td valign="top" colspan="2">
                          <a href="#" class="show-ans">Show Answers</a>
                          </td>
                        </tr> 
                      </td>                      
                    </tr>
                                            <tr>
                        <td colspan="2">
                          <b>Options : </b>
                        </td>
                      </tr>
                                                                  <tr>
                        <td class="options" colspan="2">                     1 .

90o

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     2 .

between 0o and 180o

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     3 .

180o only 

                        </td>
                      </tr>
                                            <tr>
                        <td class="options" colspan="2">                     4 .

none of these

                        </td>
                      </tr>
                                            <tr>
                        <td colspan="2">
                          <b>Correct Answer :</b> 2   
                        </td>
                      </tr>              
                                      </table>
                        </div>
              </div>
            </td>
          </tr>

        </tbody>
      </table>    
  </div>

这里我展示了问题、可用选项和正确答案。单击超链接，我将隐藏并显示可用选项和正确答案。它的代码如下：

$(document).ready(function() {
$(".show-ans").click(function(e) {
    e.preventDefault();
    if($(this).parent().parent().parent().children("tr:last").is(":visible")){
        $(this).parent().parent().parent().children("tr:not(:first)").hide();
        $(this).html("Show Answers");
    } else {
        $(this).parent().parent().parent().children("tr:not(:first)").show();
        $(this).html("Hide Answers");
    }
  });
});

上面的代码也可以正常工作。我的问题是，当页面加载时，所有问题都应该隐藏这些东西，如果点击超链接，它应该隐藏，如果它正在显示，它应该在隐藏时显示。有人可以在这方面帮助我吗？

【问题讨论】：

你应该用 css 隐藏它，否则当它最初在慢速计算机/浏览器上加载时，答案会在页面上闪烁。
只需切换一个类...
Kevin B 是对的，你需要添加 display: hidden;到答案的css，而不是使用javascript在页面加载时隐藏它们

标签： javascript jquery html html-table show-hide

【解决方案1】：

使用静态 CSS 隐藏它们，以便在页面加载时看不到它们。您的代码只是为单击事件添加了一个事件处理程序，但是，在有人单击该链接之前，您的元素将始终可见。

【讨论】：

在你的 CSS 文件中，如果你有的话。如果你不这样做，你应该将演示与内容分开。

【解决方案2】：

不改变你的逻辑：

$(document).ready(function() {
    $(".show-ans").each(function() {
        if($(this).parent().parent().parent().children("tr:last").is(":visible")){
            $(this).parent().parent().parent().children("tr:not(:first)").hide();
            $(this).html("Show Answers");
        } else {
            $(this).parent().parent().parent().children("tr:not(:first)").show();
            $(this).html("Hide Answers");
        }
      });
    });

但这种任务有更好的解决方案：toggle() 或toggleClass()。

在隐藏和显示之间切换。

然而，最佳实践是 toggleClass() 添加和删除 css 类。在您的情况下，您可以简单地从 2 个 par 开始，例如：

<p id="answersyes">Show Ansers</p>
<p id="answerno" class="hideToUser">Hide Answrs</p>

在您的 css 文件中：

.hideToUser {
  display: none; 
}

使用 css 类，您将能够扩展解决方案以设置背景颜色、粗体文本等。此外，将样式应用于您的 html 很简单，无需使用 javascript（因此会增加手动操作）。

【讨论】：

【解决方案3】：

就像您对“question_info”所做的那样，您可以添加一个类“answer_info”。在 CSS 中添加：.answer_info{display: none;} 或 .answer_info{visibility: hidden;}。在显示答案功能中，您使用 jquery 删除类 $('.answer_info').removeClass('answer_info');

【讨论】：