代码之家 › 专栏 › 技术社区 › Dr.0000FF

jQuery按钮点击不显示/隐藏内容

css jquery html javascript

Dr.0000FF · 技术社区 · 1 年前

我刚开始使用Javascript,我无法获得 <p> p元素 <article id="main"> 文章。

再一次,我很抱歉我缺乏知识。我添加了2 <script> 在body元素的底部,将JS连接到HTML。

我现在的位置是:

Html代码:

<!DOCTYPE html>
<!-- 
    Student Name: Moses Saygbe
    File Name: index.html
    Current Date: 01/31/2025
 -->
<html lang="en">
<head>
 
    <title>Chapter 10, Extend</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css">

</head>

<body>

    <div id="wrapper">
        
        <h1>Learning How to Use jQuery</h1>
    
        <article id="main">
        
                <p>I know how to create HTML pages.</p>
                <p>I know how to style webpages with CSS.</p>
                <p>I know how to add functionality to webpages with JavaScript.</p>
                <p>I understand how to use the jQuery library.</p>

                <button id="hide">Hide</button>
                <button id="show">Show</button>
        
        </article>
        
        <footer>
            <p>Student's Name: Moses Saygbe</p>
            <p>The latest version of jQuery is: </p>
            <p>Resource used to complete this assignment: </p>
        </footer>
    
    </div>
    <script src="scripts/script.js"></script>
    <script src="jquery-3.7.1.min.js"></script>
</body>
</html>

我已尝试替换 #main 具有 ('p#main') 仍然没有运气。

.JS代码:

function remove() {
    $('#hide').click(function(){
        $('#main').hide();
    });

} 

function display() {
    $
}

当我预览Html文件时,隐藏按钮不会隐藏文章或p元素。

1 回复 | 直到 1 年前

Rory McCrossan Hsm Sharique Hasan 1 年前

你的代码的主要问题是你定义了 remove() 方法,但它从未在任何地方被调用。此外,该函数仅在 #hide 按钮。

jQuery选择器遵循与CSS相同的语法,因此要选择 p 内部元素 #main 选择器是 #main p ,不 p#main .我建议复习一下 CSS selector rule syntax .

最后,定义a 'document ready' jQuery代码中的处理程序。您可以将任何与DOM交互的代码放入此函数中。如果你的代码在 script 标签就在前面 </body> 这不一定要求你这样做,但这样做只是为了避免将来重新排列HTML时出现任何问题。

从那里,您可以简单地定义按钮点击事件处理程序来显示/隐藏 #主要 div根据需要。

以下是上述更改的工作示例:

jQuery($ => {
  $('#hide').on('click', function() {
    $('#main p').hide();
  });

  $('#show').on('click', function() {
    $('#main p').show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="wrapper">
  <h1>Learning How to Use jQuery</h1>

  <article id="main">
    <p>I know how to create HTML pages.</p>
    <p>I know how to style webpages with CSS.</p>
    <p>I know how to add functionality to webpages with JavaScript.</p>
    <p>I understand how to use the jQuery library.</p>
    
      <button id="hide">Hide</button>
  <button id="show">Show</button>
  </article>

  <footer>
    <p>Student's Name: Moses Saygbe</p>
    <p>The latest version of jQuery is: </p>
    <p>Resource used to complete this assignment: </p>
  </footer>
</div>