Comment améliorer cette méthode de bascule jQuery

J'essaie d'apprendre jquery, j'ai quelques bases de javascript.Comment améliorer cette méthode de bascule jQuery

J'ai écrit ce morceau de code pour basculer entre les 3 fonctions, il fonctionne très bien

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
</head> 

<style type="text/css"> 
    .format1{ 
     background: red; 
    } 
    .format2{ 
     background: yellow; 
    } 
    .format3{ 
     background: blue; 
    } 
</style> 

<div id="div-toggle">Click here to toggle</div> 

<script language="javascript"> 
    var click = 0; 
    $('#div-toggle').toggle(
     function(){ 
      var el = $('#div-toggle'); 
      el.addClass('format1'); 

      el.html('No. of clicks: ' + click++); 
     }, 
     function(){ 
      var el = $('#div-toggle'); 
      el.removeClass('format1'); 
      el.addClass('format2'); 

      el.html('No. of clicks: ' + click++); 
     }, 
     function(){ 
      var el = $('#div-toggle'); 
      el.removeClass('format2'); 
      el.addClass('format3'); 

      el.html('No. of clicks: ' + click++); 
     } 
    ); 
</script> 
</html>

ici si vous voyez le contenu de toutes les fonctions de la bascule est similaire. Comment puis-je améliorer cela en déplaçant ces codes pour utiliser une seule fonction?

Source

2009-08-28 Anonymous

Ecrire une fonction pour générer callbacks:

var click = 0; // keep track of how many times user has clicked 

// Generates an event handler that will remove oldClass, add newClass, increment 
// click, and update the element text whenever it is called. 
function ClassSwapper(oldClass, newClass) 
{ 
    return function() 
    { 
    $(this) 
     .removeClass(oldClass) 
     .addClass(newClass) 
     .html('No. of clicks: ' + ++click); 

    }; 
} 

// generate three event handlers for toggle, such that the three 
// format classes are cycled. 
$('#div-toggle').toggle(
    ClassSwapper('format3', 'format1'), 
    ClassSwapper('format1', 'format2'), 
    ClassSwapper('format2', 'format3') 
);

Notez que toggle() tourne les gestionnaires de la dernière retour à la première, donc vous voulez probablement que votre premier gestionnaire pour supprimer la classe ajouter ed par le dernier ...

Puisque vous gardez un compteur, vous pouvez simplement éviter tout toggle(), et combiner le compteur, une liste des classes pour faire défiler et un gestionnaire d'événements click:

// number of times user has clicked, and also index of *next* class to use 
var click = 0; 
$("#div-toggle").click(function() 
{ 
    // classes to cycle through 
    var classes = ['format1', 'format2', 'format3']; 

    // removes previous class, adds new one. 
    // note that, for brevity, this takes advantage of 
    // a detail specific to JavaScript arrays: negative indexes are 
    // interpreted as property names, so the first time this is called, 
    // removeClass() will be passed the value of classes["-1"] (which will 
    // return undefined) and will as a result do nothing. 
    $(this) 
    .removeClass(classes[(click-1)%classes.length]) 
    .addClass(classes[(click)%classes.length]) 
    .html('No. of clicks: ' + ++click); 
});

Source

2009-08-28 16:25:07 Shog9

Je pense que vous devriez passer par la fermeture de javascript.

En utilisant javascript fermeture javascript peut être réécrite comme

<script language="javascript"> 
    var click = 0; 
    $('#div-toggle').toggle(
     toggle('format1'), 
     toggle('format2', 'format1'), 
     toggle('format3', 'format2') 
    ); 

    function toggle(add, remove){ 
     return function(){ 
      var el = $('#div-toggle'); 
      if(remove){ 
       el.removeClass(remove); 
      } 
      el.addClass(add); 

      el.html('No. of clicks: ' + click++); 
     } 
    } 
</script>

J'espère que cela résoudra votre problème.

Vous pouvez utiliser certaines de ces ressources pour en apprendre davantage sur les fermetures
http://www.jibbering.com/faq/faq_notes/closures.html
http://www.javascriptkit.com/javatutors/closures.shtml
http://ejohn.org/apps/learn/#48

Source

2009-08-28 16:20:21

Comment améliorer cette méthode de bascule jQuery

Répondre

Questions connexes