Retour à Forum de programmation

Si...Else syntaxe peut se tromper?

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 13th, 2009, 8:57 pm

Im en utilisant le jQuery "en aveugle" la fonction d'étendre et de masquer un div selon qu'il ya ou pas la case est cochée. Mon IF ELSE ne fonctionne pas bien.
Code: [ Select ]
var y = document.getElementById("advanced").checked;
if (y == true){
$(function(){
 
    $("#advanced").click(function () {
      $("#searchTools").show("blind", { direction: "vertical" }, 700);
});
 
  });
}
else {
$(function(){
   
$("#advanced").click(function () {
      $("#searchTools").hide("blind", { direction: "vertical" }, 700);
});
 
  });
}
  1. var y = document.getElementById("advanced").checked;
  2. if (y == true){
  3. $(function(){
  4.  
  5.     $("#advanced").click(function () {
  6.       $("#searchTools").show("blind", { direction: "vertical" }, 700);
  7. });
  8.  
  9.   });
  10. }
  11. else {
  12. $(function(){
  13.    
  14. $("#advanced").click(function () {
  15.       $("#searchTools").hide("blind", { direction: "vertical" }, 700);
  16. });
  17.  
  18.   });
  19. }


mon HTML ressemble à ceci:
Code: [ Select ]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MusicBrainz!</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
<script type="text/javascript" src="js/divgrow.js"></script>
 
<style type="css/text">
#seachTools {
        display: none;
    height: 220px;
    width: 450px;
    overflow: hidden;
    display: none;
}
</head>
 
<body>
<div id="searchTools">
<label title="Search For">Search For: </label>
<input name="search2" type="text" size="50" maxlength="256" border="0" class="searchInput" />
</div>
<div id="inputWrap">
<label>
<input type="checkbox" id="advanced" />
</label>
<label>Advanced Search Options</label>
 
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>MusicBrainz!</title>
  5. <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  6. <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  7. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
  8. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
  9. <script type="text/javascript" src="js/divgrow.js"></script>
  10.  
  11. <style type="css/text">
  12. #seachTools {
  13.         display: none;
  14.     height: 220px;
  15.     width: 450px;
  16.     overflow: hidden;
  17.     display: none;
  18. }
  19. </head>
  20.  
  21. <body>
  22. <div id="searchTools">
  23. <label title="Search For">Search For: </label>
  24. <input name="search2" type="text" size="50" maxlength="256" border="0" class="searchInput" />
  25. </div>
  26. <div id="inputWrap">
  27. <label>
  28. <input type="checkbox" id="advanced" />
  29. </label>
  30. <label>Advanced Search Options</label>
  31.  


Anyone know why?
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mai 13th, 2009, 8:57 pm

  • Nightslyr
  • Proficient
  • Proficient
  • No Avatar
  • Inscription: Sep 21, 2005
  • Messages: 274
  • Status: Offline

Message Mai 14th, 2009, 11:47 am

Eh bien, tout d'abord, votre code ne fait pas beaucoup de sens à partir d'un point de vue logique. Vous avez essentiellement:

Si «avancé» a été vérifié:
lorsque «avancé» est cliqué, montrent un élément.
Else:
lorsque «avancé» est cliqué, masquer un élément.

Ses accessoires comme un clic sur "recherche avancée" est le même que si oui ou non son été vérifiées.

Au lieu de cela, pourquoi pas attacher tout à une bascule?

Code: [ Select ]
$("#advanced").toggle(
function()
{
$("#searchtools").show("blind", { direction: "vertical" }, 700);
},
function()
{
$("#searchtools").hide("blind", { direction: "vertical" }, 700);
});
  1. $("#advanced").toggle(
  2. function()
  3. {
  4. $("#searchtools").show("blind", { direction: "vertical" }, 700);
  5. },
  6. function()
  7. {
  8. $("#searchtools").hide("blind", { direction: "vertical" }, 700);
  9. });


Ive jamais utilisé le composant d'interface utilisateur de jQuery, mais je ne vois pas pourquoi un wouldnt bascule simple suffit.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 14th, 2009, 12:30 pm

juste essayé votre suggestion, et il n'a rien fait, mais je pense que votre compte. basculer solution semble plus facile. Toutes les idées sur les raisons pour lesquelles son ne fonctionne pas?
Use your words like arrows to shoot toward your goal.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Mai 14th, 2009, 2:24 pm

check it out guys, a finalement obtenu ce travail. J'ai trouvé un effet appelé slideToggle jQuery. Je vais aller de l'avant et expliquer whats going on pour quiconque en a besoin.

Le code:

Code: [ Select ]
Javascript Code
$(document).ready(function() {
  $('#searchtools').hide();
  $('#advanced').click(function() {
    $('#searchTools').slideToggle(1000);
    return false;
  });
});
  1. Javascript Code
  2. $(document).ready(function() {
  3.   $('#searchtools').hide();
  4.   $('#advanced').click(function() {
  5.     $('#searchTools').slideToggle(1000);
  6.     return false;
  7.   });
  8. });


Code: [ Select ]
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MusicBrainz!</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
<script type="text/javascript" src="js/divgrow.js"></script>
 
<style type="css/text">
#seachTools {
        display: none;
    height: 220px;
    width: 450px;
    overflow: hidden;
    display: none;
}
</head>
 
<body>
<div id="searchTools">
<label title="Search For">Search For: </label>
<input name="search2" type="text" size="50" maxlength="256" border="0" class="searchInput" />
</div>
<div id="inputWrap">
<label>
<input type="checkbox" id="advanced" />
</label>
<label>Advanced Search Options</label>
 
  1. HTML Code:
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>MusicBrainz!</title>
  6. <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  7. <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  8. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
  9. <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.blind.js"></script>
  10. <script type="text/javascript" src="js/divgrow.js"></script>
  11.  
  12. <style type="css/text">
  13. #seachTools {
  14.         display: none;
  15.     height: 220px;
  16.     width: 450px;
  17.     overflow: hidden;
  18.     display: none;
  19. }
  20. </head>
  21.  
  22. <body>
  23. <div id="searchTools">
  24. <label title="Search For">Search For: </label>
  25. <input name="search2" type="text" size="50" maxlength="256" border="0" class="searchInput" />
  26. </div>
  27. <div id="inputWrap">
  28. <label>
  29. <input type="checkbox" id="advanced" />
  30. </label>
  31. <label>Advanced Search Options</label>
  32.  




La première partie du javascript dit le document de cacher la div qui a le searchTools "id" avant le chargement de la page:
Code: [ Select ]
 
// The first line asks the document if it's ready to load:
$(document).ready(function() {
 
//When the document is ready to load, but before it actually does,
//this line tell the document to hide the div "searchTools."
  $('#searchtools').hide();
 
  1.  
  2. // The first line asks the document if it's ready to load:
  3. $(document).ready(function() {
  4.  
  5. //When the document is ready to load, but before it actually does,
  6. //this line tell the document to hide the div "searchTools."
  7.   $('#searchtools').hide();
  8.  


Il déclenche la seconde partie lorsque l'utilisateur a déclenché un événement:
Code: [ Select ]
 
//This line initiates the next line whenever the user clicks on the checkbox with the id "advanced"
  $('#advanced').click(function() {
 
//This line tells the div with the id "searchTools"
//to unhide with a verticle sliding motion (slideToggle)
//and to take 1000 milliseconds to complete.
    $('#searchTools').slideToggle(1000);
 
  1.  
  2. //This line initiates the next line whenever the user clicks on the checkbox with the id "advanced"
  3.   $('#advanced').click(function() {
  4.  
  5. //This line tells the div with the id "searchTools"
  6. //to unhide with a verticle sliding motion (slideToggle)
  7. //and to take 1000 milliseconds to complete.
  8.     $('#searchTools').slideToggle(1000);
  9.  


Bien sûr, c'est à ma meilleure compréhension d'une langue (javascript) qui Ive juste commencé à puiser dans il ya seulement 2 jours. Donc, toute personne possédant le savoir-faire qui pense Ive a expliqué cette erreur, s'il vous plaît n'hésitez pas à me corriger.
Use your words like arrows to shoot toward your goal.

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 4 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 218 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC