0

私の問題: http://www.danieldoktor.dk/test3/test3.html

いずれかのパレットで色を選択すると、両方のボックスの色が設定されます。

各パレットを制御する全体的なコードが必要です。

したがって、上のボックスのパレットから色を選択すると、上のボックスの背景色のみが変更され、下のボックスも同様です。

後でphpで使用されるため、コードはIDではなくクラスである必要があります。

私のマークアップ:

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 に答える