改變不同元素的顏色

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