Question

我正在尝试学习som jQuery。我有一个问题，错误告诉我＆＃34; DIV＆＃34;我指的是没有定义...

我已经定义了我的4 DIVS，请帮助我找到我做错了什么。

这是我的代码：

<html>

<head>

<title>jQuery Test 3</title>




</head>

<body>

<section id="buttons">
<label>Enter ID: </label>
<input id="idChooseTxt" type="text"><br>
<input id="fadeOutBtn" type="button" value="Fade Out">
<input id="fadeInBtn" type="button" value="Fade In">
<input id="slideUpBtn" type="button" value="Slide Up">
<input id="slideDownBtn" type="button" value="Slide Down">

</section>


<section id="mineDiver"></section>




<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>

$(function(){    


    var $idChooseTxt;
    var $fadeOutBtn, $fadeInBtn;
    var $slideUpBtn, $slideDownBtn;



    function setHTMLObjects(){

    $idChooseTxt = $("#idChooseTxt");
    $fadeOutBtn = $("#fadeOutBtn");
    $fadeInBtn = $("#fadeInBtn");
    $slideUpBtn = $("#slideUpBtn");
    $slideDownBtn = $("#slideDownBtn");


    };





    function setEvents(){

     $("#fadeOutBtn").click(fadingOut);
    $("#fadeInBtn").click(fadingIn);
        $("#slideUpBtn").click(slidingUp);
        $("#slideDownBtn").click(slidingDown);

    };

    function myDivs(){    
   var $Div1 = $("<div>")
    .css(
        {
            height: "200px",
            width: "200px",
            background: "black",
            marginTop: "10px",
            marginLeft: "10px",
            float: "left"
        })


            $("#mineDiver").append($Div1);



    var $Div2 = $("<div>")
    .css
    (
        {
            width: "200px",
            height: "200px",
            background: "red",
            marginTop: "10px",
            marginLeft: "10px",
            float: "left"
        })

    $("#mineDiver").append($Div2);



    var $Div3 = $("<div>")
              .css
              (
              {
              width: "200px",
              height: "200px",
              background: "yellow",
              marginTop: "10px",
              marginLeft: "10px",
              float: "left"
              })

    $("#mineDiver").append($Div3);





    var $Div4 = $("<div>")
    .css 
    (
        {
            width: "200px",
            height: "200px",
            background: "blue",
            marginTop: "10px",
            marginLeft: "10px",
            float: "left"

        })

    $("#mineDiver").append($Div4);



    }

    function fadingOut(){

    var divChosen = $idChooseTxt.val();

        if(divChosen === "div1"){
            $($Div1).fadeOut(1000);
        }else if(divChosen === "div2"){
            $($Div2).fadeOut(1000);
        }else if(divChosen === "div3"){
            $($Div3).fadeOut(1000);
        }else if(divChosen === "div4"){
            $($Div4).fadeOut(1000);

        }
    };
      function fadingIn(){

    var divChosen = $idChooseTxt.val();

        if(divChosen === "div1"){
            $($Div1).fadeIn(1000);
        }else if(divChosen === "div2"){
            $($Div2).fadeIn(1000);
        }else if(divChosen === "div3"){
            $($Div3).fadeIn(1000);
        }else if(divChosen === "div4"){
            $($Div4).fadeIn(1000);

        }
    };

      function slidingUp(){

    var divChosen = $idChooseTxt.val();

        if(divChosen === "div1"){
            $($Div1).slideUp(1000);
        }else if(divChosen === "div2"){
            $($Div2).slideUp(1000);
        }else if(divChosen === "div3"){
            $($Div3).slideUp(1000);
        }else if(divChosen === "div4"){
            $($Div4).slideUp(1000);

        }
    };


      function slidingDown(){

    var divChosen = $idChooseTxt.val();

        if(divChosen === "div1"){
            $($Div1).slideDown(1000);
        }else if(divChosen === "div2"){
            $($Div2).slideDown(1000);
        }else if(divChosen === "div3"){
            $($Div3).slideDown(1000);
        }else if(divChosen === "div4"){
            $($Div4).slideDown(1000);

        }
    };
    var init = function(){
        setHTMLObjects();
        setEvents();
        myDivs();
    }();
});







</script>









</body>


</html>

Answer 1

$Div#被定义为myDivs方法的局部变量。你不能在外面访问它们。他们不是全球性的。

function myDivs(){    
   var $Div1 = $("<div>")  <-- var makes it local
}

添加变量

var $idChooseTxt;
var $fadeOutBtn, $fadeInBtn;
var $slideUpBtn, $slideDownBtn;
var $Div1, $Div2, $Div3, $Div4;

并删除函数myDivs

中的var

function myDivs(){    
   $Div1 = $("<div>")...
   $Div2 = $("<div>")...
   $Div3 = $("<div>")...
   $Div4 = $("<div>")...
}

＆＃34;股利＆＃34;没有定义

1 个答案: