更改不同元素的颜色

Changing color for different elements

本文关键字：颜色 元素      更新时间：2023-09-26

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

$('#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 个不同颜色背景的按钮。通过单击按钮，我们获得它的颜色属性，并将这种颜色添加到字体、背景、悬停等。

你要找的是创建一个带有参数的函数。 函数允许您传入值;该函数将所述值插入其内部工作。 在您的情况下，您将传入一个颜色值，如下所示...

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');
});

等等。

    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
假设在

单击两个按钮时，您只是在更改某些元素的颜色和某些元素的背景图像。所有 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);
}
相关文章：