Question

我的问题：http://www.danieldoktor.dk/test3/test3.html

当您在任一个调色板中选择一种颜色时，它会为两个框设置颜色。

我想要一个整体代码来控制每个调色板。

因此，当您从上方框中的调色板中选择一种颜色时，它只会更改上方框的背景颜色，而下方框中的颜色相同。

我需要代码与类而不是ID，因为稍后它将与php一起使用。

MY MARKUP：

HTML

 <div class="lists">
        <header class="box_header" id="box1">
            <h1>HEADER 1</h1>
            <!--<div class="setting"></div>-->
            </header>
            <input type='text' class='flatPalette' value="#DDD" />
 </div>

 <div class="lists">
        <header class="box_header" id="box2">
            <h1>HEADER 2</h1>
            <!--<div class="setting"></div>-->
            </header>
            <input type='text' class='flatPalette' value="#DDD" />
 </div>

的jQuery

function updateBackground(color) {
    $(".lists").css("background", color.toHexString());
}

$(function() {


$(".flatPalette").spectrum({
    flat: true,
    showInput: true,
    showPaletteOnly: true,
    showPalette:true,
    maxPaletteSize: 10,
    palette: [
        ['black', 'white', 'blanchedalmond',
        'rgb(255, 128, 0);', 'hsv 100 70 50', "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)"],
        ['red', 'yellow', 'green', 'blue', 'violet']
    ],
    change: updateBackground
});

});

有人可以帮忙吗？

Answer 1

您使用.lists类定位所有内容

因此您需要将它们命名为不同并为它们分别调用它们或单独定位它们并使用$（this）返回正确的

类似的东西：

function updateBackground(color) {
     $(this).parents(".lists").css("background", color.toHexString());
}

Answer 2

您需要将颜色更改限制为已更改元素的父级，如下所示：

function updateBackground(color) {
    $(this).parents(".lists").css("background", color.toHexString());
}

我没有尝试过该代码，但它应该可以正常工作。

两个jQuery colorpickers控制类

2 个答案: