javascript/jQuery變量未定義

腳本有5個面板，其中3個可選，並觸發下面的onclick事件。javascript/jQuery變量未定義

它正常工作，甚至提醒，但是當我嘗試改變輸入的值，並觸發上點擊，KEYUP它給我的錯誤「selectedID沒有定義」

的「selectedID」

的價值

這裏是我的JS

jQuery(document).ready(function($) { 

/////////// 
    $("div.door").click(function() { 

     resetall(); 
      $("div.door").removeClass("panelselected"); 
      $(this).toggleClass("panelselected"); 
      var selectedID = $(this).attr("id"); 
       alert(selectedID); 


      $("#customisedoor").fadeIn("slow"); 
      $("#"+selectedID).animate({ 
       height: 118-Number($("#doorheight").val())*2+"px" 

      }, 200); 
      var height = 118-Number($("#doorheight").val())*2; 
      var topmargin = Number($("#doorheight").val())*2; 
      $("#"+selectedID).css("margin-top", topmargin+"px"); 
      ////////////////////////////IF PANEL 2 
      if(selectedID === 'panel2'){ 
$("#panel1").append('<img src="images/draught-skirts/button.png" class="button right appended"/>'); 
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
      } 
      ///////////////////////IF PANEL 3 
      if(selectedID === 'panel3'){ 
$("#panel2").append('<img src="images/draught-skirts/button.png" class="button right appended"/>'); 
$("#panel4").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
      } 
      ///////////////////////// 
      ///////////////////////IF PANEL 3 
      if(selectedID === 'panel4'){ 
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button right appended"/>'); 
$("#panel5").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
      } 
      ///////////////////////// 
    }); 

    $("#doorwidth").keyup(function(){ 

      $("#"+selectedID).animate({ 
       width: $("#doorwidth").val()*2+"px" 
       }, 200); 
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val()) 
    ); 

}); 
    $("#doorwidth").click(function(){ 

      $("#"+selectedID).animate({ 
       width: $("#doorwidth").val()*2+"px" 
       }, 200); 
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val()) 
    ); 

}); 
    function calculateheight(){ 
     $("#"+selectedID).animate({ 
       height: 118-$("#doorheight").val()*2+"px" 

       }, 200); 
       height = 118-$("#doorheight").val()*2; 
       topmargin = $("#doorheight").val()*2; 
     $("#"+selectedID).css("margin-top", topmargin+"px") 
    } 

     $("#doorheight").keyup(function(){ 
      calculateheight(); 
      }); 

     $("#doorheight").click(function(){ 
      calculateheight(); 

    }); 

    function resetall(){ 
     $(".appended").remove(); 
     $(".door").css({'width':'150','height':'118','margin':'0px'}); 
     $(".door").removeClass("panelselected"); 
     $("#doorheight").val(30); 
     $("#doorwidth").val(75); 
     $("#totalwidth").val(300+$("#doorwidth").val()); 

    } 

    $("#reset").click(function() { 
     //alert("removed"); 
     resetall(); 
    }); 
    ////////////////////////////////////////////////////////////////// 

    });

完整的源從Firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<!-- JS --> 

<script type="text/javascript" src="plugins/validator/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="plugins/ui/jquery.effects.core.js"></script> 



<!-- STYLES --> 

<style> 
<!-- LAYOUT --> 


<!-- SKIRTS --> 
.panelContainer{ 
height:128px; 
width:900px; 
float:left; 
} 

.endpanel{ 
width:150px; 
float:left; 
height:118px; 
background:#BFDDF2; 
border:1px solid #7DB8DB; 
} 
.panel{ 
width:150px; 
bottom:0; 
float:left; 
height:118px; 
background:#BFDDF2; 
border:1px solid #7DB8DB; 
} 

.mid{ 
    border-left:0px; 
    } 

.door:hover{ 
width:150px; 
float:left; 
height:118px; 
background:#ECF5FB; 
border:1px solid #fff; 
} 

.panelselected{ 
width:150px; 
float:left; 
height:118px; 
background:#ECF5FB; 
border:1px solid #fff; 
} 
.container{ 
    min-width:150px; 
    width:auto; 
    float:left; 
    margin-top:3px; 
    height:7px; 
    } 

.button{ 
    width:7px; height:7px; 
    margin:3px; 

    } 
.left{float:left;} 
.right{float:right;} 






</style> 
</head> 

<body> 
<div style="width:780px; height:80px;float:left;"> 
    <h3>Please select a panel and customise the width and height to fit under your door step/doorway</h3>  

    <ul> 
     <li>Total Draught Skirt Width: <input type="text" disabled id="totalwidth" value="375"/>(CMS) </li> 
    </ul> 
</div> 
<!-- CUSTOMISE DOOR --> 



<div style="margin-top:20px; min-width:780px; height:80px;float:left;position:relative;"> 
     <div class="endpanel" id="panel1"> 
      <img src="images/draught-skirts/button.png" class="button left"/> 
     </div> 
     <div id="panel2" class="panel mid door"> 

     </div> 
     <div id="panel3" class="panel mid door"></div> 
     <div id="panel4" class="panel mid door"></div> 
     <div class="endpanel mid" id="panel5"> 

      <img src="images/draught-skirts/button.png" class="button right"/> 
     </div> 
</div> 

    <div id="customisedoor" style="clear:both; margin-top:50px;width:400px; height:80px;float:left; display:none;"> 


     <strong>Customise Your Door Panel</strong> 
    <table> 
     <tr> 
      <td>Width</td> 

      <td> 
       <input type="number" name="width" id="doorwidth" value="75"/>(CMS) 
      </td> 
     </tr> 
     <tr> 
      <td>Height From Top of Skirt: </td> 
      <td> 
       <input type="number" name="height" id="doorheight" value="30"/>(CMS) 
      </td> 

     </tr> 
    <tr> 
    <td></td> 
    <td><input type="button" id="reset" value="Reset"/></td> 
    </tr> 
     </table> 


    </div> 

    <script type="text/javascript"> 

    jQuery(document).ready(function($) { 

/////////// 
    $("div.door").click(function() { 
     resetall(); 
      $("div.door").removeClass("panelselected"); 
      $(this).toggleClass("panelselected"); 
      var selectedID = $(this).attr("id"); 


      $("#customisedoor").fadeIn("slow"); 
      $("#"+selectedID).animate({ 
       height: 118-Number($("#doorheight").val())*2+"px" 

      }, 200); 
      var height = 118-Number($("#doorheight").val())*2; 
      var topmargin = Number($("#doorheight").val())*2; 
      $("#"+selectedID).css("margin-top", topmargin+"px"); 
      ////////////////////////////IF PANEL 2 
      if(selectedID === 'panel2'){ 
$("#panel1").append('<img src="images/draught-skirts/button.png" class="button right appended"/>'); 
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
      } 
      ///////////////////////IF PANEL 3 
      if(selectedID === 'panel3'){ 
$("#panel2").append('<img src="images/draught-skirts/button.png" class="button right appended"/>'); 
$("#panel4").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
      } 
      ///////////////////////// 
      ///////////////////////IF PANEL 3 
      if(selectedID === 'panel4'){ 
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button right appended"/>'); 
$("#panel5").append('<img src="images/draught-skirts/button.png" class="button left appended"/>'); 
      } 
      ///////////////////////// 
    }); 

    $("#doorwidth").keyup(function(){ 
        alert("IDis"+selectedID); 
      $("#"+selectedID).animate({ 
       width: $("#doorwidth").val()*2+"px" 
       }, 200); 
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val()) 
    ); 

}); 
    $("#doorwidth").click(function(){ 
     alert("IDis"+selectedID); 
      $("#"+selectedID).animate({ 
       width: $("#doorwidth").val()*2+"px" 
       }, 200); 
$("#totalwidth").val(
    parseInt(300) + parseInt($("#doorwidth").val()) 
    ); 

}); 
    function calculateheight(){ 
     $("#"+selectedID).animate({ 
       height: 118-$("#doorheight").val()*2+"px" 

       }, 200); 
       height = 118-$("#doorheight").val()*2; 
       topmargin = $("#doorheight").val()*2; 
     $("#"+selectedID).css("margin-top", topmargin+"px") 
    } 

     $("#doorheight").keyup(function(){ 
      calculateheight(); 
      }); 

     $("#doorheight").click(function(){ 
      calculateheight(); 

    }); 

    function resetall(){ 
     $(".appended").remove(); 
     $(".door").css({'width':'150','height':'118','margin':'0px'}); 
     $(".door").removeClass("panelselected"); 
     $("#doorheight").val(30); 
     $("#doorwidth").val(75); 
     $("#totalwidth").val(300+$("#doorwidth").val()); 

    } 

    $("#reset").click(function() { 
     //alert("removed"); 
     resetall(); 
    }); 
    ////////////////////////////////////////////////////////////////// 

    }); 
    </script> 

</body> 
</html>

來源

2011-03-27 Tommy Arnold

喬恩斯基特寫下你應該看看一個有趣的文章：http://www.yoda.arachsys.com/csharp /incomplete.html。通常在將問題簡化爲核心的過程中，您會自己找出問題所在。 – 2011-03-27 19:53:30

selectedID超出範圍 - 它在click（...）函數內定義，如下所示...

$("div.door").click(function() { 
    ... 
    var selectedID = $(this).attr("id"); 
    ... 
});

這意味着selectedID只存在於onClick匿名函數中。它在keyup（...）函數中不可用。

$("#doorwidth").keyup(function(){ 
    ... 
    // selectedID is not available here, since it was declared inside click(...) 
);

你會想這樣的事情...

jQuery(document).ready(function($) { 
    // Define selectedID in an outer scope so it's available to all functions inside the closure. 
    var selectedID; 
    $("div.door").click(function() { 
    ... 
    // Instead of declaring selectedID inside this function, use selectedID from the outer scope. 
    selectedID = $(this).attr("id"); 
    ... 
    }); 

    $("#doorwidth").keyup(function(){ 
    // NULL check for selected ID 
    if (selectedID) { 
     $("#"+selectedID).animate({ 
     width: $("#doorwidth").val()*2+"px" 
     }, 200); 
     $("#totalwidth").val(parseInt(300) + parseInt($("#doorwidth").val()); 
    } 
); 

    ... 
});

來源

2011-03-27 19:52:46 DashK

感謝您的詳細解答，我現在明白了。 – 2011-03-27 20:10:11

您可以嘗試移動你的VAR聲明你的jQuery單擊處理之外：

var selectedID = "";

而改變：

var selectedID = $(this).attr("id");

到：

selectedID = $(this).attr("id");

來源

2011-03-27 19:47:04

完美！感謝buddy – 2011-03-27 19:49:01

沒問題。請務必將您的問題標記爲已回答！ – 2011-03-27 19:49:55

此解決方案將起作用，因爲刪除var關鍵字意味着selectedID變量將全局範圍化。 DashK的解決方案只是增加了可訪問的範圍。 – detaylor 2011-03-27 20:01:50

javascript/jQuery變量未定義

回答

相關問題