如何简化或缩小这个jQuery代码

Question

我有这样的代码做一个简单的点击来改变.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> 

有没有人对我怎样可以简化这个建议或例子吗？即...采取25行代码，并使其5或6？

感谢您的任何建议。

Answer 1

你可以做两件事情：

首先，添加，改变两者的背景色和指定选择的颜色的功能。

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

而且使用它是这样的：

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

其次，使用以上所示的的CSS（）语法在一行更改多个样式属性。

这些不会让你下降到5或6行，但它会大大缩短和清理代码。

Answer 2

1. 移动一些到一个CSS文件中，你有JS的东西：

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

2. 因子从数据的代码。在地图上添加ID到合适的颜色：

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

3. 写一个JS的功能，做您的设置对您：

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

4. 调用文档的准备过程中的循环设置功能：

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