Question

在我的项目中，我有两个按钮可以改变整个布局的颜色，如字体颜色，背景颜色，悬停颜色和框阴影颜色。现在它的工作原理如下：

$('#red').click(switchRed);
$('#green').click(switchGreen);
$('#blue').click(switchBlue);

function switchRed() {
    $('.shadow-color').css('box-shadow', '0 0 0 2px #d94d4b, 0 0 0 #d94d4b');
    $('.font-color').css('color', '#d94d4b');
    $('.bg-color').css('background', '#d94d4b');
    $('.hover-color').hover(function(){
        $(this).css('background', '#d94d4b');
    }, function(){
        $(this).css('background', '');
    });
    $('.focus-color').focus(function() {
        $(this).css('box-shadow', '0 0 5px #d94d4b');
    });
    $('.focus-color').blur( function() {
        $(this).css('box-shadow','');
    });
    $('.color-icon').attr('src', 'img-v4/dl-button-red.png');
}

function switchGreen() {
    $('.shadow-color').css('box-shadow', '0 0 0 2px #86aa66, 0 0 0 #86aa66');
    $('.font-color').css('color', '#86aa66');
    $('.ui-tooltip-content').css('box-shadow', '0 0 0 5px #86aa66');
    $('.bg-color').css('background', '#86aa66');
    $('.hover-color').hover(function(){
        $(this).css('background', '#86aa66');
    }, function(){
        $(this).css('background', '');
    });
    $('.focus-color').focus(function() {
        $(this).css('box-shadow', '0 0 5px #86aa66');
    });
    $('.focus-color').blur( function() {
        $(this).css('box-shadow','');
    });
    $('.color-icon').attr('src', 'img-v4/dl-button-green.png');
}

它工作正常，但如果我有4-5个甚至更多颜色按钮，我必须将所有这些功能相乘，我的脚本将完全不可读。你能帮我创建一个干净简洁的脚本吗？它应该以下一种方式工作：我们有2-3个不同颜色背景的按钮。通过单击按钮，我们可以获得它的颜色属性，并将此颜色添加到字体，背景，悬停等中。

Answer 1

您正在寻找的是创建一个带参数的函数。函数允许您传入一个值;该函数将所述值插入其内部工作中。在你的情况下，你会传递一个颜色值，就像这样......

function setColor(color) {
    $('.shadow-color').css('box-shadow', '0 0 0 2px ' + color + ', 0 0 0 ' + color);
    $('.font-color').css('color', color);
    $('.bg-color').css('background', color);
    etc....
}

使用括号传入一个或多个参数（值），然后在功能代码中使用为参数设置的名称作为占位符。这样，你输入的颜色并不重要，它只会插入所有正确的位置。

然后，当你想使用这个功能时，你只需要说

$('#red').click(function () {
    setColor('#d94d4b');
});

依此类推。

Answer 2

    HTML Code: <input type=button id ='red' value="red" data-colorcode = '#d94d4b' data-image = 'dl-button-red.png'>
    JS code: function switchColor() {

        var colorCode = $(this).data('colorcode');
        var colorImage = $(this).data('image');


        $('.shadow-color').css('box-shadow', '0 0 0 2px colorCode 0 0 0 '+colorCode);
        $('.font-color').css('color', colorCode);
        $('.bg-color').css('background', colorCode);
        $('.hover-color').hover(function(){
            $(this).css('background', colorCode);
        }, function(){
            $(this).css('background', '');
        });
        $('.focus-color').focus(function() {
            $(this).css('box-shadow', '0 0 5px ');
        });
        $('.focus-color').blur( function() {
            $(this).css('box-shadow','');
        });
        $('.color-icon').attr('src', 'img-v4/d'+colorImage );
    }

I hope this is working for you, logical part is define your color "data-color = '#d94d4b' " and get this color into jquery "    var colorCode = $(this).data('colorCode');" pass to color variable

Answer 3

假设在点击两个按钮时，您只是更改某些元素的颜色和某些元素的背景图像。所有3种布局中只使用一种颜色和背景图像。基于这些假设，以下代码片段应该可以正常工作

$('#red').bind('click', { color: '#d94d4b', image_src: 'img-v4/dl-button-red.png' }, switchLayoutColor);
$('#green').bind('click', { color: '#86aa66', image_src: 'img-v4/dl-button-green.png' }, switchLayoutColor);
$('#blue').bind('click', { color: 'blue', image_src: 'img-v4/dl-button-blue.png' }, switchLayoutColor);

function switchLayoutColor (event) {
    var data = event.data;
    var color = data.color;
    var image_src = data.image_src;

    $('.shadow-color').css('box-shadow', '0 0 0 2px ' + color + ', 0 0 0 ' + color + ');
    $('.font-color').css('color', color);
    $('.bg-color').css('background', color);
    $('.hover-color').hover(function(){
        $(this).css('background', color);
    }, function(){
        $(this).css('background', '');
    });
    $('.focus-color').focus(function() {
        $(this).css('box-shadow', '0 0 5px ' + color);
    });
    $('.focus-color').blur( function() {
        $(this).css('box-shadow','');
    });
    $('.color-icon').attr('src', image_src);
}

改变不同元素的颜色

3 个答案: