Question

我正在创建允许用户通过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种颜色选项，肯定有办法压缩这些功能。

提前感谢那些帮助的人。

Answer 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);

Answer 2

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

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);

}

缩短JQuery cookie代码

2 个答案: