如何簡化或縮小這個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); 
       } 
   });