1

我正在创建允许用户通过 JQuery 更改颜色的小部件

<img id="blue1" src="color_blue.png" /> 
<img id="red1" src="color_red.png" /> 
<img id="yellow1" src="color_yellow.png" /> 
<img id="green1" src="color_green.png" /> 
<img id="grey1" src="color_grey.png" />


$("img#blue1").on("click", function() {
    $(this).parent().parent().parent().css("background", "#3399cc");
    $(this).parent().parent().parent().css("border", "1px solid #1E6081");
    $(this).parent().parent().parent().children('h1').css("background", "#a9c0cc");
    $(this).parent().parent().parent().children('h1').css("border-bottom", "1px solid #1E6081");
});

等等

我希望通过 cookie 保存颜色，因此当页面刷新或离开时用户具有相同的颜色，所以我使用的是 JQuery cookies 插件。

这是我的代码：

$("#w1 img#blue1").on("click", function() {
$.cookie('wcolor1', 'blue')
});

if ($.cookie('wcolor1') == 'blue')
{
$('#w1').css("background", "#3399cc");
$('#w1').css("border", "1px solid #1E6081");
$('#w1 h1').css("background", "#a9c0cc");
$('#w1 h1').css("border-bottom", "1px solid #1E6081");
}

我觉得必须有一种更简单的方法来做到这一点，我有 6 个小部件，每个小部件有 5 种颜色选项，肯定有一种方法可以压缩这些功能。

提前感谢那些提供帮助的人。

4

2 回答 2

1

首先

$("#w1 img#blue1").on("click", function() {

可以替换为

$("#blue1").on("click", function() {

因为HTML中的id应该是唯一的..

因此，您可以编写一个事件句柄来处理所有click事件

这些行中有一些东西

$("#blue1, #red1, #yellow1, #green1, #grey1 ").on("click", function() {
     // get the color to be set
     var color = this.id.replace('1', '');
     $.cookie('wcolor1', color)
});

或者，您可以只为您想要点击事件的所有图像提供一个通用类并用类选择器替换..

对于设置样式的条件，您可以将颜色以数据属性的形式存储在元素本身上，或者根据您设置颜色的条件编写。

第一种情况大约需要 5 行代码。第二种情况是每种颜色的 if 语句，您可以在其中设置颜色。或者，如果您将信息存储在哈希中，则可以消除这些条件。

var color = $.cookie('wcolor1'),
    mainBkg = 'defaultBackground',
    mainBorder = 'defaultBackground',
    childBkg = 'defaultBackground',
    childBorder = 'defaultBackground';


if (color === 'blue') {
    mainBkg = '#3399cc';
    mainBorder = '1px solid #1E6081',
    childBkg = '#a9c0cc',
    childBorder = '1px solid #1E6081';
}
else if(color === 'red') {
       // set the colors for red
}
..
..

var $w1 = $('#w1'),
    $h1 = $('h1', $w1);

$('#w1').css({
    "background", mainBkg,
    "border", "1px solid #1E6081"
});
$w1.css("background", mainBkg);
$w1.css("border", mainBorder);
$h1'.css("background", childBkg);
$h1.css("border-bottom", childBorder);
于 2013-07-16T21:16:14.710 回答
0

您可以使用对象定义属性，如下所示：

var theme = {
  blue: {
    'background-color': 'blue',
    'border' : '1px solid blue'
    //add all your "blue" theme options
  },
  green: {
    'background-color': 'green',
    'border' : '1px solid green'
     //add all your "green" theme options
  }
}

然后，您可以为所有主题使用相同的功能检索选项：

var selectedTheme = $.cookie('wcolor1');  

if(theme[selectedTheme] !== "undefined"){
  $('#w1').css("background", theme[selectedTheme].background);
  $('#w1').css("border",  theme[selectedTheme].border);

}
于 2013-07-16T21:20:00.633 回答