缩短JQuery cookies代码
缩短JQuery cookies代码
提问于 2013-07-17 05:07:46
我正在创建允许用户通过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");
}); 等。
我希望通过cookies保存颜色，以便用户在页面刷新或离开时具有相同的颜色，因此我使用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个颜色选项，当然有一种方法可以压缩这些函数。
提前感谢那些提供帮助的人。
回答 2
Stack Overflow用户
发布于 2013-07-17 05:16:15
首先
$("#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);Stack Overflow用户
发布于 2013-07-17 05:20:01
您可以使用对象定义属性，如下所示：
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17687003
复制相关文章
相似问题
腾讯云开发者
