Problème de bloc jquery if/else

Je rencontre un problème avec un bloc if/else. Le problème est que le bloc else est toujours en cours d'exécution. Lorsque le clic se produit, si deux éléments select ont tous les deux une classe de "current-drop" alors seul le bloc if devrait s'exécuter.Problème de bloc jquery if/else

Cependant, puisque ces deux classes sont supprimées à la fin du bloc if (les classes sont ajoutées à nouveau plus tard en utilisant la méthode change()) alors je suppose que cela provoque l'exécution du bloc else. Est-ce parce que l'événement click n'est pas terminé lorsque les classes sont supprimées, provoquant le changement des conditions?

Comment puis-je contourner le problème?

$('.add-button').click(function() { 

var class1=$("#select-pub").attr('class'); 
var class2=$("#select-segment").attr('class'); 

if ((class1=='current-drop') && (class2=='current-drop')) { 

    $('<li />', {text: $('#select-pub option:selected').text()}) 
    .appendTo('div #publisher-results ul'); 
    $('<li />', {text: $('#select-segment option:selected').text()}) 
    .appendTo('div #segment-results ul'); 
    $('#select-pub').removeClass('current-drop'); 
    $('#select-segment').removeClass('current-drop'); 
    $('#error-message').css('visibility','hidden'); 
} 

else 
{ 
    $('#error-message').css('visibility','visible'); 
} 

});

modifier: Voici la page - oui, je sais qu'il est un peu un gâchis soupy en ce moment ...

<!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> 
    <title>Group Commerce | Dashboard</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 

    <link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.css"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="js/add-items-over.js"></script> 
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 


    $("a#click-up").fancybox({ 
     'padding':0, 
     'margin':0, 
     'scrolling':'no', 
     'showCloseButon':'true', 
     'overlayColor':'#dfdfdf' 
     }); 



}); 
</script> 



<style type="text/css"> 
     /* Custom Theme */ 


     h1 {font-family:verdana;font-size:18px; color:#122652;padding:30px 0 0 20px;} 

     table {width:577px;margin-left:20px; 
     border:1px solid #d5d5d5;font-family:arial; font-size:11px;} 

     table td { 
      border-right:1px solid #d5d5d5; 
      padding:5px 0 5px 5px; 
      } 

     tr.table-bg td { 
      border-bottom:1px solid #d5d5d5; 
      font-weight:bold; 
      background:url(images/table-top-bg.jpg) repeat-x; 
      } 

     #modal-left { 
      width:272px; 
      margin-top:-11px; 
      float:left; 
      } 

     #modal-right { 
      width:335px; 
      float:right; 
      margin-top:-11px; 
      } 

      #error-message { 
      margin-bottom:15px; 

     margin-left:20px; 
      margin-top:5px; 
      } 

      .error-default { 
       color:red; 
       } 

      .error-message-no { 
       visibility:hidden !important; 
       } 

     .error-message-yes { 
       visibility:visible; 
       } 

     #modal-left p { 
      margin-left:20px; 
      } 

     #modal-left a, #modal-right a { 
      background:url(images/add-select.gif) no-repeat; 
      margin-top:-1px; 
      } 

     #modal-left a { 
      position:relative; 
      right:2px; 
      } 



      .select-div { 
       width:272px; 
       float:left; 
       } 

      .link-div { 
       width:46px; 
       height:22px; 
       float:right; 
       margin-top:30px; 
       } 

      #modal-left select { 
      margin-left:20px; 
      width:252px; 
      } 

      #publisher-results { 
       background-color:#f9f9f9; 
       width:252px; 
       height:100px; 
       margin-left:20px; 
       margin-top:5px; 
       } 

      #segment-results { 
       background-color:#f9f9f9; 
       width:252px; 
       height:100px; 
       margin-top:3px; 
       } 

      .select-div2 { 
       width:220px; 
       float:left; 
       } 

      .select-div2 select { 
       width:252px; 
       } 

      .link-div2 { 
       width:46px; 
       height:22px; 
       float:right; 
       position:relative; 
       right:22px; 
       } 

      #modal-right a { 
      background:url(images/add-select.gif) no-repeat; 
      position:relative; 
      right:2px; 
      } 

      #publisher-results { 
       overflow:hidden; 
       } 

      #publisher-results ul { 
       margin-top:5px !important; 
       } 

      #publisher-results li { 
       list-style:none; 
       position:relative; 
       right:30px; 
       margin-bottom:3px; 
       } 

      #segment-results { 
       overflow:hidden; 
       } 

      #segment-results ul { 
       margin-top:5px !important; 
       } 

      #segment-results li { 
       list-style:none; 
       position:relative; 
       right:30px; 
       margin-bottom:3px; 
       } 

      #footer { 
       text-align:right; 
       margin-top:150px; 
       width:100%; 
       padding-right:30px; 
       } 

      #footer-submit { 
       display:block; 
       float:right; 
       width:116px; 
       height:22px; 
       background:url(images/submit-to-copy.gif) no-repeat; 
       position:relative; 
       right:12px; 
       margin-left:10px; 
       } 

      #footer-cancel { 
       display:block; 
       float:right; 
       width:68px; 
       height:22px; 
       background:url(images/cancel.gif) no-repeat; 
       position:relative; 
       right:12px; 
       } 
      #box-content { 
       border:1px solid white; 
       } 

    </style> 

</head> 

<body> 

<div id="modal-wrap"> 
<a id="click-up" href="#box-content">Click here for popup</a> 

<div style="display:none;"> 
<div id="box-content" style="width:620px;height:335px;background:url(images/modal-bg.gif) left top no-repeat;"> 
<h1>Send the following deal to copy stage...</h1> 

<table border="0" cellspacing="0" cellpadding="0"> 
<tr class="table-bg"> 
<td>Vendor</td> 
<td>Vendor ID</td> 
<td style="width:100px;">Offer</td> 
<td>Status</td> 
<td>Availability Start</td> 
<td style="border-right:none;">Availability End</td> 
</tr> 

<tr> 
<td>Apple</td> 
<td>10010000111</td> 
<td>$2.99 app</td> 
<td>Ready for Market</td> 
<td>9/20/2010</td> 
<td style="border-right:none;">9/20/2010</td> 
</tr> 
</table> 

<p id="error-message"><em>Both the publisher and the segment fields are required!</em></p> 
<div id="modal-left"> 



<script type="text/javascript"> 

$(document).ready(function() { 

$('#error-message').addClass('error-default'); 
$('#select-pub').change(function() { 
$(this).addClass('current-drop'); 
}); 

$('#select-segment').change(function() { 
$(this).addClass('current-drop'); 
}); 


$('.add-button').click(function() { 

var class1=$("#select-pub").attr('class'); 
var class2=$("#select-segment").attr('class'); 
if ($('#select-pub').hasClass('current-drop') && $('#select-segment').hasClass('current-drop')) { 

    $('<li />', {text: $('#select-pub option:selected').text()}) 
    .appendTo('div #publisher-results ul'); 
    $('<li />', {text: $('#select-segment option:selected').text()}) 
    .appendTo('div #segment-results ul'); 
    $('#select-pub').removeClass('current-drop'); 
    $('#select-segment').removeClass('current-drop'); 
    $('#error-message').css('visibility','hidden'); 
    } 

    /*else 
    { 
    $('#error-message').css('visibility','visible'); 
    }*/ 

}); 
}); 

</script> 



<div class="select-div"> 

<select id="select-pub"> 
<option val="1" selected>Publisher 1</option> 
<option val="2">Publisher 2</option> 
<option val="3">Publisher 3</option> 
<option val="4">Publisher 4</option> 
</select> 

</div> 

<!--<div class="link-div"> 
<a class="add-button" href="#" style="width:46px;height:22px;display:block;"></a> 
</div>--> 

<div style="clear:both;"></div> 
<div id="publisher-results"> 
<ul> 
</ul> 
</div> 

</div> 


<script type="text/javascript"> 

$(document).ready(function() { 

$('.add-button-2').click(function() { 
$('<li />', {text: $('#select-segment option:selected').text()}) 
.appendTo('#segment-results ul'); 
$('#segment-results ul li:odd').css('display','none'); 
}); 

}); 

</script> 
<div id="modal-right"> 

<div class="select-div2"> 
<select id="select-segment"> 

<option selected>Segment 1</option> 
<option>Segment 2</option> 
<option>Segment 3</option> 
<option>Segment 4</option> 
</select> 

</div> 

<div class="link-div2"> 
<a href="#" class="add-button" style="width:46px;height:22px;display:block;"></a> 
</div> 

<div style="clear:both;"></div> 
<div id="segment-results"> 
<ul style="margin:0;"> 
</ul> 
</div> 

</div> 

<div id="footer"> 

<a href="#" id="footer-submit"></a> 
<a href="javascript:;" onclick="$.fancybox.close();" id="footer-cancel"></a> 
</div> 
</div> 
</div> 
</body> 
</html>

Source

2010-10-06 johnnyb

Le bloc else ne peut pas s'exécuter simultanément si le bloc if est déjà en cours d'exécution. Avez-vous plusieurs classes dans vos sélections? Si c'est le cas, vous ne devriez pas utiliser 'attr ('class')' pour interroger les classes. – BoltClock

Pouvez-vous également publier votre code HTML? Une erreur dans votre code HTML (une citation manquante, par exemple) obligera jQuery à toujours aller dans l'instruction else, mais en raison de la robustesse du navigateur, votre site Web aura l'air bien. – JasCav

Pas de classes multiples, seulement des identifiants pour chaque sélection. Le div id "message d'erreur" obtient le css dans le bloc else quelles que soient les conditions. Si je supprime le bloc else, le message d'erreur # obtient le bon css. – johnnyb

Après avoir posté votre code (merci), j'ai mis de l'ordre dans le code HTML. Il semble qu'il vous manque une balise fermante <div> quelque part qui pourrait vous causer des problèmes. Autant que je puisse voir, votre jQuery a raison - donc je suppose que c'est sur le HTML. (Je rechercherais des guillemets ainsi que des parenthèses correspondantes.)

Source

2010-10-06 19:35:47 JasCav

Je viens de mettre le script dans la tête de la page et cela a fonctionné! Aucune idée pourquoi ce serait. – johnnyb

@johnnyb - Ahhh ... vous faites probablement référence à quelque chose qui n'a été défini que plus tard (lorsque votre Javascript était plus bas). Ma suggestion, cependant, est que vous encapsulez vos scripts dans un fichier séparé. Les garder dans la tête entraîne des temps de chargement plus lents et ne tire pas parti de la mise en cache. Content que ton problème ait été réparé! – JasCav

Si vous avez d'autres cours sur ces éléments, il sera toujours échouer. Réviser la partie if à:

if($('#select-pub').hasClass('current-drop') && $('#select-segment').hasClass('current-drop')) { 
...

Source

2010-10-06 18:57:47 mway

A fait cela, mais n'a rien changé. Le bloc Else est toujours en cours d'exécution. – johnnyb

Vous devriez regarder ce que les valeurs de la classe 1 et classe 2 sont, avant de frapper le si/bloc d'autre. Utilisez une alerte() ou console.log().

Source

2010-10-06 18:59:46

Problème de bloc jquery if/else

Répondre

Questions connexes