JQueryHide(）在按钮中使用元素时不会隐藏元素

JQuery Hide() does not hide element when using it in a button

本文关键字：元素 隐藏 按钮 JQueryHide      更新时间：2023-09-26

我一直在尝试使用.toggle()和.hide（）`来隐藏JQuery中的段落元素。我还没有成功地让这两个工作。根据是否单击按钮，段落元素应被隐藏。

DomReady

$(document).ready(function() {
  $("button").onclick(function(){
    $("#paragraph").hide();
  });
});


<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="styles.css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<p id="paragraph">Click here to hide me</p>
   <input type="button" value="Hide">
</body>
</html>

Javascript：

$(document).ready(function () {
    function btn1Down() {
        $("#btn1 ul li").css("box-shadow", "0px 0px 5px rgba(115, 115, 115, 0.60)");
        $("#btn1Left ul li").css("box-shadow", "6px 6px 0px rgba(115, 115, 115, 0.60)");
    }
    function btn1Up() {
        $("#btn1 ul li").css("box-shadow", "3px 3px 0px rgba(115, 115, 115, 0.60)");
        $("#btn1Left ul li").css("box-shadow", "0px 0px 0px rgba(115, 115, 115, 0.60)");
    }
    $("button").toggle(function() {
        $("#paragraph").html("hello");
    }, function() {
         $("#paragraph").html("hi");
         });
});

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Firecoding Library</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="jquery-ui.js"></script>
        <script src="jquery.js"></script>
        <script src="Script.js"></script>
    </head>
    <body>
        <p id="paragraph">Click here to toggle me</p>
        <input type="button" value="toggle">
        
        <!--<div id="btnContain1">
            <div id="release"><p>Release</p></div>
            <div id="btn1" onmousedown="btn1Down()" onmouseup="btn1Up()"><ul>
                <li>Button</li>
            </ul></div>
            <div id="btn1Left"><ul>
                <li></li>
            </ul></div>
        </div>-->
    </body>
</html>

点击按钮不会导致段落被隐藏，尽管我希望它应该被隐藏。我在Chrome开发工具控制台中也没有收到任何错误。

HTML中不存在"button"元素，您可以给按钮一个id，并尝试在jQuery中使用它。此外，您的onclick应该只是click。尝试进行以下更改：

HTML

<p id="paragraph">Click here to hide me</p>
<input id="btn" type="button" value="Hide">

JS-

$(document).ready(function() {
    $("#btn").click(function() {
        $("#paragraph").toggle(); // hide() works too!
    });
});

我看到的几件事。。。一个是"按钮"选择器——它将匹配一个元素，但不匹配一个元件。第二件事是.onclick——据我所知，它在jQuery中并不存在。

尝试。。。

$("input[type='button']").click(function() { ... });
// or
$("input[type='button']").on("click", function() { ... });

编辑：在.thoggle（）的东西上，看起来缺少了一些参数（我没有看到只使用函数的重载）。再加上与上述相同的选择器问题。http://api.jquery.com/toggle/

相关文章：