缩短JQuery的饼干代码

我创建小工具，允许用户通过JQuery缩短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"); 
}

我觉得必须有这样做一个简单的方法，我每5色可选6个部件，肯定有压缩这些功能的方式。

在此先感谢那些帮助。

来源

2013-07-16 xcollinx

独立数据从你的代码中，然后你可以写一个通用函数。另外，如果你不需要告诉服务器，考虑'localStorage'。 –

首先

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

可以用

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

由于ID在HTML应该是唯一的替代..

所以，你可以写一个单一事件句柄来处理所有click事件

东西在这些线路

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

或者你可以给一个普通类所有你希望有一个click事件，并用类选择更换图片..

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

第一种情况是约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-16 21:16:14

你可以使用一个对象定义的属性，如：

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-16 21:20:00

缩短JQuery的饼干代码

回答

相关问题