Question

我需要为我的WordPress主题创建一个多选项样式切换器，但我无法正常工作（请参阅下面的代码）。通过多选项我的意思是：用户应该能够彼此独立地选择自定义颜色，图案和字体（简单的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);
    });

});

Answer 1

您需要将“PROCESS VALUES”位移动到颜色选择器中的onChange事件中，因为代码会立即执行，而您希望在拾取的颜色为KNOWN时执行，然后处理该值

$('#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 =”“CLICKED'#patterns li img”的价值 - 你甚至没有在任何图片上获得点击事件，也没有相关值在他们身上。

Answer 2

好的，我们走了：

<head>
  <link class="css" href="red.css" /> <!-- default style give url and whats not --> 
  <script>
      $('select').change(function (){
          $('.css').remove();
          var val = $(this).val();
          $('<link class="css" href="'+val+'" />').appendTo('head');


      });
  </script>
</head>
<body>
<select>
 <option value="black">black</option>
 <option value="red">red</option>
</select>
</body>

除此之外你还有jquery主题切换器为什么乱七八糟？大声笑

如何使用jQuery创建一个多选项Style Switcher？

2 个答案: