Question

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>

Answer 1

将Jquery代码放入document.ready（），如下所示：同时检查Fiddle。

$(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 =＆＃34; toggleButton＆＃34;而不是id =＆＃34; #toggleButton＆＃34;

<强> HTML ：

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

Answer 2

将其包裹在文档就绪功能中。

Answer 3

id =“toggleButton”而非id =“＃toggleButton”将会这样做。

Answer 4

见这个例子。

<!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>

由于阿米特

Answer 5

<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>

jQuery切换不起作用

5 个答案: