variable javascript/jquery non définie

Le script comporte 5 panneaux 3 sélectionnables et déclenche l'événement onclick ci-dessous.variable javascript/jquery non définie

il fonctionne très bien et avertit même la valeur de « SelectedID »

mais lorsque je tente de changer les valeurs sur les entrées et déclencher le sur clic, keyUp il me donne l'erreur « SelectedID non défini »

Voici mon 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(); 
    }); 
    ////////////////////////////////////////////////////////////////// 

    });

source complet à partir de 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>

Source

2011-03-27 Tommy Arnold

Jon Skeet a écrit un article intéressant, vous devriez jeter un oeil à: http://www.yoda.arachsys.com/csharp /incomplete.html. Souvent en train de réduire votre problème à son noyau, vous comprendrez vous-même le problème. –

SelectedID est hors de portée - Il est défini à l'intérieur de la fonction de clic (...) comme ci-dessous ...

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

Ce qui signifie que selectedID n'existe que dans la fonction anonyme onClick. Ce n'est pas disponible dans la fonction keyup (...).

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

Vous voulez quelque chose comme ça ...

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()); 
    } 
); 

    ... 
});

Source

2011-03-27 19:52:46 DashK

Merci pour la réponse détaillée, je comprends maintenant. –

Vous pouvez essayer de déplacer votre déclaration var en dehors de votre gestionnaire de clic jQuery:

var selectedID = "";

Et changer:

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

à:

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

Source

2011-03-27 19:47:04

Parfait !!! Merci mon pote –

Pas de problème. Assurez-vous de marquer votre question comme répondue! –

Cette solution fonctionnera parce que la suppression du mot-clé var signifie que la variable selectedID aura une portée globale. La solution de DashK augmente simplement la portée de manière à être accessible. – detaylor

variable javascript/jquery non définie

Répondre

Questions connexes