Comment rationaliser ou Réduire ce code jQuery

Question

J'ai ce code pour faire un simple clic pour changer de couleur HIGHLIGHT:

<script src="http://code.jquery.com/jquery-1.5.js"></script> 
<script> 
$(document).ready(function() { 
$("#colors").css("cursor","pointer"); 
$("#color1").css("background-color","#e3dc98"); 
$("#color1").click(function() { 
    $(".highlight").css("background-color","#e3dc98"); 
    $(".highlight").css("color","#000000"); 
}); 
$("#color2").css("background-color","#588000"); 
$("#color2").css("color","#ffffff");  
$("#color2").click(function() { 
    $(".highlight").css("background-color","#588000"); 
    $(".highlight").css("color","#ffffff"); 
}); 
$("#color3").css("background-color","#66ccff"); 
$("#color3").click(function() { 
    $(".highlight").css("background-color","#66ccff"); 
    $(".highlight").css("color","#000000"); 
}); 
$("#color4").css("background-color","#ffcc00"); 
$("#color4").click(function() { 
    $(".highlight").css("background-color","#ffcc00"); 
    $(".highlight").css("color","#000000"); 
}); 
}); 
</script> 

Quelqu'un at-il une suggestion ou par exemple sur la façon dont je peux rationaliser cela? c'est-à-dire ... prendre 25 lignes de code et en faire 5 ou 6?

Merci pour vos suggestions.

Answer 1

Vous pouvez faire une ou deux choses:

D'abord, ajouter une fonction qui change à la fois la couleur de fond et la couleur d'un sélecteur donné.

function change_colors(selector, background_color, font_color) { 
    $(selector).css({"background-color":background_color, "color":font_color}) 
} 

Et l'utiliser comme ceci:

change_colors(".highlight", "#e3dc98", "#e3dc98"); 

Deuxièmement, utilisez la syntaxe Css() ci-dessus pour modifier plusieurs propriétés de style dans une ligne.

Cela ne vous réduira pas à 5 ou 6 lignes, mais réduira et nettoiera considérablement le code.

Answer 2

1. déplacer quelques-unes des choses que vous avez dans JS dans un fichier CSS:

   #colors{cursor:pointer;} 
   #color1{background-color:#e3dc98;} 
   (et cetera) 
   

2. factoriser le code à partir des données. Créer une carte d'ID aux couleurs appropriées:

   var colors = { 
       color1: {fore:'#000000', back:'#e3dc98'}, 
       color2:{fore:'#ffffff', back:'#588000'}, 
       (et cetera) 
   }; 
   

3. Ecrire une seule fonction JS qui fait votre configuration pour vous:

   var fWireUpBlock = function(selector, foreColor, backColor){ 
       var newCSS = {color:foreColor, backgroundColor:backColor}; 
       $(selector).css(newCSS).click(function(ev){ 
        $('.highlight').css(newCSS); 
       }); 
   }; 
   

4. Appelez la fonction de configuration dans une boucle au cours de document prêt:

   $(function(){ 
       foreach(var c in colors){ 
        fWireUpBlock('#'+c, colors[c].fore, colors[c].back); 
       } 
   });