jQuery 切换不起作用

jQuery toggle is not working

本文关键字：不起作用 jQuery      更新时间：2023-09-26
var resultsList = $("#test");
resultsList.text("Hello. This is jQuery!");
var tB = jQuery("#toggleButton");
tB.on("click", function() {
    resultsList.toggle(400);
});

我相信语法是正确的，因为浏览器控制台没有报告任何错误。

加载页面时，切换未按预期工作。知道吗，我在这里错过了什么？

我的HTML是：

<div id="results" class="bordered-image"> 
    <button id="#toggleButton">Hide</button> 
    <div id="test">This is where results will live...eventually.</div>     
</div>

将 Jquery 代码放入 document.ready(( 中，如下所示： 也检查小提琴。

$(document).ready(function(){
       var resultsList = $("#test");
        resultsList.text("Hello. This is jQuery!");
        var tB = jQuery("#toggleButton");
        tB.on("click", function() {
            resultsList.toggle(400);
        });
    });

您的 id 属性应该是 id="toggleButton" 而不是 id="#toggleButton"

HTML：

<div id="results" class="bordered-image"> 
    <button id="toggleButton">Hide</button> 
    <div id="test">This is where results will live...eventually.</div>     
</div>

id="toggleButton"而不是id="#toggleButton"就可以了。

将其包装在文档就绪函数中。

请参阅此示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="results" class="bordered-image"> 
    <button id="toggleButton">Hide</button> 
    <div id="test">This is where results will live...eventually.</div>     
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
   var resultsList = $("#test");
    resultsList.text("Hello. This is jQuery!");
    $("#toggleButton").click(function() {
        resultsList.toggle(400);
    });
});
</script>
</html>

谢谢阿米特

<div id="results" class="bordered-image"> 
<button id="#toggleButton" onclick="myff();">Hide</button> 
 <div id="test">This is where results will live...eventually.</div>     
</div>
 <script>
 function myff(){
  $("#test").toggle();  
  }
</script>
相关文章：