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

将JS中的一些内容移到CSS文件中：

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

将数据中的代码分解出来。创建ID到适当颜色的地图：

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

编写一个JS功能，为您设置设置：

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

在文档准备期间循环调用设置功能：

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

如何简化或收缩此jQuery代码

2 个答案: