Inversion de la case à cocher en JavaScript avec jQuery

Aide sur le comportement des cases à cocher des tests unitaires. J'ai cette page:Inversion de la case à cocher en JavaScript avec jQuery

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body'); 
      $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body'); 

      $('#makeHidden').click(function() { 
       var isChecked = $(this).is(':checked'); 

       if (isChecked) { 
        $('#displayer').hide(); 
       } 
       else { 
        $('#displayer').show(); 
       } 
       return false; 
      }); 

     }); 

    </script> 
</head> 
<body> 
</body> 
</html>

Cela ne fonctionne pas, il est à cause de la return false; dans le gestionnaire de clic. Si je l'enlève, ça fonctionne très bien. Le problème est que si je tire la fonction de clic sur dans sa propre fonction et test unitaire avec QUnit il ne fonctionnera pas sans return false;

[EDIT] En utilisant @ patrick répondre à mes résultats sont les suivants:

Firefox :

Test manuel du jouet - bon.
Tests unitaires - bien.
Test manuel de l'application de production - bien.

Internet Explorer:

Test manuel de jouet - échec.
Tests unitaires - bien.
Test manuel de l'application de production - Échec.

Internet Explorer requiert initialement un clic. après cela, il faut deux clics.

Je pensais que jQuery est de faire abstraction des navigateurs? Est-ce que je vais avoir à surcharger le comportement entier de la case à cocher pour une solution?

Dans mes tests unitaires voilà comment je fais la simulation de case à cocher d'un utilisateur:

$(':input[name=shipToNotActive]').removeAttr('checked'); 
$('#shipToNotActive').change();

et aussi:

$(':input[name=shipToNotActive]').attr('checked', 'checked'); 
$('#shipToNotActive').change();

Source

2010-05-20 Gutzofter

Comment à propos de l'utilisation change au lieu de click?

$('#makeHidden').change(function() { 
      var isChecked = $(this).is(':checked'); 

      if (isChecked) { 
       $('#displayer').hide(); 
      } 
      else { 
       $('#displayer').show(); 
      } 
      return false; 
     });

Le return false; ne sera pas dans le chemin depuis l'événement est déclenché à la suite du changement ayant eu lieu.

Source

2010-05-20 15:34:06 user113716

Cela fonctionne jusqu'à présent dans mon exemple de jouet. Maintenant, laissez-moi exécuter mes tests en code réel! – Gutzofter

Ça a l'air bien. Tiens-moi au courant de ce que ça devient. – user113716

Fonctionne comme un charme dans Firefox. Firefox: Test manuel du jouet - bien. Tests unitaires - bien. Test manuel de l'application de production - bien. Internet Explorer: Test manuel du jouet - échoué. Tests unitaires - bien. Test manuel de l'application de production - échouer. Internet Explorer nécessite initialement un clic. après cela, il faut deux clics. – Gutzofter

Essayez ceci:

$(function() { 
    $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body'); 
    $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body'); 

    $('#makeHidden').click(function() { return onCheckboxClicked(this) }); 
}); 

function onCheckboxClicked(el) { 
    var isChecked = $(el).is(':checked'); 

    if (isChecked) { 
     $('#displayer').hide(); 
    } 
    else { 
     $('#displayer').show(); 
    } 
    return false; 
}

Source

2010-05-20 15:32:02

été sur cette route. En raison du retour faux, il remplace le comportement de la case à cocher. Il sera toujours vérifié. il exécute bien le clic, mais réinitialise la propriété checked en interne sur la case à cocher. vraiment retardé. se passe dans IE et Firefox – Gutzofter

Here is a work around.

Maintenant mon code est comme ceci:

 if ($.browser.msie) { 
      $('#makeHidden').change(function() { 
       this.blur(); 
       this.focus(); 
       onCheckboxClicked(); 
      }); 
     } 
     else { 
      $('#makeHidden').change(function() { 
       return onCheckboxClicked(); 
      }); 
     }

Tous mes tests, y compris jouet manuel et la production manuelle sont bonnes.

Quelqu'un at-il quelque chose de mieux que ce hack?

Source

2010-05-20 16:54:34 Gutzofter

+1 - Fait intéressant, j'ai récemment travaillé sur un problème IE 'change' quelque peu similaire, sauf sur une liste' select'. Cette solution/hack nécessitait une API native 'blur()' et 'focus()' comme la tienne. Contrairement au vôtre, ce problème était lié au fait que 'change' * ne * tirait pas la première fois, mais le deuxième changement (et chaque changement par la suite) était déclenché. Donc, la solution était un jQuery 'focus()', puis un natif 'blur() focus()'. Heureusement, aucune vérification du navigateur n'a été nécessaire car le hack n'a fonctionné qu'une seule fois. Je suis le suivi de celui-ci comme un rappel. Merci d'avoir posté votre solution. – user113716

Le problème est que mes tests unitaires n'ont pas capturé le problème. Je pense que c'est pourquoi vous ne devriez pas tester le gui. – Gutzofter

Aidé d'un problème que j'avais. Au lieu de vérifier pour IE, je viens de publier le flou/focus quel que soit le navigateur. – vol7ron

Inversion de la case à cocher en JavaScript avec jQuery

Répondre

Questions connexes