我需要为我的 WordPress 主题创建一个多选项 Style Switcher，但我什么也做不了(见下面的代码)。通过多选项我的意思是:用户应该能够选择彼此独立的自定义颜色、图案和字体(简单的 css 链接交换不会做)。所有这些都远远超出了我目前的技能水平，任何人都可以在正确的方向上帮助我吗？
基本标记:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Style Switcher</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/plugins.css">
</head>
<body id="top">
<div id="wrapper">
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
<script src="js/plugins.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
scripts.js(第二次尝试) 改编自 this theme .
// DOM READY, NO CONFLICT REMAP
jQuery(document).ready(function($){
// THEME NAME
var themeID='mytheme';
// STYLE SWITCHER MARKUP
$('body').append(
'<div id="ss">'+
'<p>'+
'<select id="ssColor" name="ss-color">'+
'<option value="red">Red</option>'+
'<option value="green">Green</option>'+
'<option value="blue">Blue</option>'+
'</select>'+
'</p>'+
'<p>'+
'<select id="ssPattern" name="ss-pattern">'+
'<option value="pat-a">Pattern A</option>'+
'<option value="pat-b">Pattern B</option>'+
'<option value="pat-c">Pattern C</option>'+
'</select>'+
'</p>'+
'<p>'+
'<a id="ssReset" href="">Reset</a>'+
'</p>'+
'</div>'
);
// RESET
$('#ssReset').click(function(){
var i=0;
var cookies = new Array();
$('#ss select').each(function(){
var cookie = $(this).attr('name');
cookies[i] = cookie;
i++;
});
});
// ???
var cookiesMax=cookies.length;
for(var i=0, max=cookiesMax; i<max; ++i){
$.dough(themeID+'-'+cookies[i],'remove');
}
// APPLY CHANGES FUNCTION
function applyChanges(id,selectName,selectValue){
var cookieName=id+'-'+selectName;
$.dough(cookieName,selectValue);
location.reload();
}
// PROCESS
$('#ss select').change(function(){
var selectName = $(this).attr('name');
var selectValue = $(this).val();
applyChanges(themeID,selectName,selectValue);
});
});
scripts.js(第一次尝试) 改编自 this tutorial .
// DOM READY, NO CONFLICT REMAP
jQuery(document).ready(function($){
// APPLY STYLES FUNCTION
function apply_styles(bgcolor,bgpattern){
$('html').css('backgroundColor','#'+bgcolor);
$('html').css('backgroundImage','url(img/'+bgpattern+')');
}
// CREATE COOKIE FUNCTION
function create_cookie(bgcolor,bgpattern){
$.dough('bgcolor','remove');
$.dough('bgcolor',bgcolor);
$.dough('bgpattern','remove');
$.dough('bgpattern',bgpattern);
}
// READ COOKIES ELSE DEFAULTS
var cbgcolor=$.dough('bgcolor');
var cbgpattern=$.dough('bgpattern');
if(cbgcolor!=undefined&&cbgpattern!=undefined){
apply_styles(cbgcolor,cbgpattern);
}else{
apply_styles('fff','default.gif');
}
// STYLE SWITCHER
$('body').append(
'<div id="style_switcher">'+
'<p><strong id="colorpicker_box"><em></em></strong></p>'+
'<ul id="patterns">'+
'<li><img src="css/img/spat1.gif" rel="pat1.gif" alt=""></li>'+
'<li><img src="css/img/spat2.gif" rel="pat2.gif" alt=""></li>'+
'<li><img src="css/img/spat3.gif" rel="pat3.gif" alt=""></li>'+
'</ul>'+
'<p><strong id="save_css">Save</strong></p>'+
'</div>'
);
// COLORPICKER
$('#colorpicker_box').ColorPicker({
onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
onChange:function(hsb,hex,rgb){
$('#colorpicker_box em').css({backgroundColor:'#'+hex});
}
});
// PROCESS VALUES
var pickerValue= // store 'hex' from COLORPICKER above, but how?
var patternValue= // store rel="" value of CLICKED '#patterns li img'
$('#save_css').click(function(){
apply_styles(pickerValue,patternValue);
});
});
最佳答案
您需要将您的“PROCESS VALUES”位移动到颜色选择器的 onChange 事件中，因为代码会立即执行，否则您希望在选择的颜色已知时采取行动，然后处理该值。
$('#colorpicker_box').ColorPicker({
onShow:function(colpkr){$(colpkr).fadeIn(500);return false;},
onHide:function(colpkr){$(colpkr).fadeOut(500);return false;},
onChange:function(hsb,hex,rgb){
// PROCESS VALUES
var patternValue= // store rel="" value of CLICKED '#patterns li img'
$('#save_css').click(function(){
apply_styles('#' + hex, patternValue);
});
$('#colorpicker_box em').css({backgroundColor:'#'+hex});
}
});
我不确定我是否收到了您的评论“store rel=""value of CLICKED '#patterns li img"——您甚至没有在任何图像上获得点击事件，也没有 rel 值在他们身上。
关于jquery - 如何使用 jQuery 创建多选项样式切换器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5977749/