0

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

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

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

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

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

我的标记：

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

});

任何人都可以帮忙吗？

4

2 回答 2

2

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

因此，您要么需要将它们命名为不同的名称并为它们中的每一个调用它，要么分别针对它们并使用 $(this) 返回正确的

像这样的东西：

function updateBackground(color) {
     $(this).parents(".lists").css("background", color.toHexString());
}
于 2013-02-28T14:51:00.090 回答
0

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

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

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

于 2013-02-28T14:50:53.207 回答