为什么图片没有显示在JavaScript切换中?

问题描述 投票:0回答:2

我试图将这些图像放在本网站内容的隐藏/显示切换中,作为使用教程网站的人的示例。但是,每次我将图片输入“隐藏/显示”块的主体时,它都不会隐藏,它始终可见,并且隐藏/显示按钮不会执行任何操作。有关如何解决此问题的任何建议?

$(document).ready(function() {
  $("button").click(function() {
    $("p").toggle();
  });
});
<!DOCTYPE HTML>
<html lang="en">
<title>Homeroom GPA Calculatiion: Step 1</title>
<meta charset="utf-8">

<head>
  <link rel="stylesheet" href="hayes_java_project.css">
  <script src="gpa_calculation.js"></script>
  <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<!-- Nav -->
<nav>
  <ul class="links">
    <li><a href="hayes_java_project.html">Home: GPA Calculation Tutorial</a></li>
    <li><a href="project_why.html"> Why Calculate your GPA?</a></li>
    <li><a href="project_step_1.html">Step 1: Document Your Grades</a></li>
    <li><a href="project_step_2.html">Step 2: Convert Grade Percentages to GPA Points</a></li>
    <li><a href="project_step_3.html">Step 3: Average GPA Point Total to Get GPA</a></li>
    <li><a href="project_step_4.html">Step 4: Submit GPA for Teachers</a></li>
  </ul>
</nav>


<h1>HHHS Homeroom GPA Calculation: Step 1</h1>
<h2>Document Your Grades</h2>
<p>For this step, you will need your paper and writing utensil. Go to HomeAccess through the CPS portal and write down your 7 classes (not including homeroom) with the percentage of your current grade. See example below. </p>


<body>

  <button>Examples of Step 1 Here.</button>

  <p>Write down all classes. <img src="example1.png" alt="Write Down all of your current classes on paper" height="400" width="300" class="center"></p>
  <p>Document percentage points for each. <img src="example1.png" alt="Write Down all of your current classes on paper" height="400" width="300" class="center"></p>

</body>


<footer><small><i>Page created by Samantha Hayes.<br>
        Copyright &copy; 2018 <br>
        Please <a href="mailto:[email protected]">e-mail</a> me with any questions.<br>
        Last updated on December 2018. </i></small>
</footer>
<p>

</html>
javascript html
2个回答
0
投票

请注意,如果您的jQuery选择器设置为现在使用$("p").toggle();,您将隐藏文档中的所有p标签,这可能不是您想要的。

最好设置一个像$(".hide").toggle();这样的选择器,然后用你想要隐藏的所有内容包围该类的div,如下所示:

<div class="hide">
  <p>Write down all classes. <img src="example1.png" alt="Write Down all of your current classes on paper" height="400" width="300" class="center"></p>
  <p>Document percentage points for each. <img src="example1.png" alt="Write Down all of your current classes on paper" height="400" width="300" class="center"></p>
</div>

0
投票

您的jquery链接无法正常工作并提供错误:请尝试以下链接和模式:

<head>
 <link rel="stylesheet" href="hayes_java_project.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="gpa_calculation.js"></script>
</head>

Jquery代码工作正常。

和html内容一样(首先隐藏单个p来切换):

<p>Write down all classes. <img src="example1.png" alt="Write Down all of your current classes on paper" height="400" width="300" class="center"></p>
<p style="display:none;">Document percentage points for each. <img src="example1.png" alt="Write Down all of your current classes on paper" height="400" width="300" class="center"></p>

希望能帮助到你。

© www.soinside.com 2019 - 2024. All rights reserved.