我的 jQuery 颜色选择器

Question

我正在为我的项目开发一个颜色选择器，客户可以点击一种颜色，然后点击颜色弹出窗口，以便您选择/提交该颜色。

我想将样式（即颜色代码）添加到“color_example”，并在此 div 中添加颜色代码（即单击颜色的值）。

如果您单击另一种颜色，我已经尝试删除 html 弹出窗口，这很有效，但它也会从 #colors 范围中删除颜色代码。

有人可以帮我将点击元素的样式添加到示例中，当点击另一种颜色时，其中的颜色值不会消失，而只有示例弹出窗口。

我将它添加到 jsfiddle：http://jsfiddle.net/yKZP6/2/

我的html：

<div id="color_scheme">
    <div id="colors"> 
        <span value="1000" style="background:rgb(190,189,127);">1000</span>
         <span value="1001" style="background:rgb(194,176,120);">1001</span>
         <span value="1002" style="background:rgb(198,166,100);">1002</span>
         <span value="1003" style="background:rgb(229,190,1);">1003</span>
         <span value="1004" style="background:rgb(205,164,052);">1004</span>
         <span value="1005" style="background:rgb(169,131,007);">1005</span>
         <span value="1006" style="background:rgb(228,160,016);">1006</span>
         <span value="1007" style="background:rgb(220,156,000);">1007</span>
         <span value="1011" style="background:rgb(138,102,066);">1011</span>
         <span value="1012" style="background:rgb(199,180,070);">1012</span>
         <span value="1013" style="background:rgb(234,230,202);">1013</span>
         <span value="1014" style="background:rgb(225,204,079);">1014</span> 
    </div><!--End colors-->
</div><!--End color_scheme-->

我的 jQuery：

// Custom Select box
enableSelectBoxes();

// Custom select box function
function enableSelectBoxes() {
    $('div#color_scheme').each(function () {
        if ($(this).children('span.selected').html() == '') $(this).children('span.selected').html($(this).children('div#colors').children('div#colors span:first').html());


        $(this).find('#colors span').click(function () {
            $('#colors span.selected_color')
                .removeClass('selected_color')
                .empty();

            $(this).addClass('selected_color')
                .html('<div class="this_color"><div class="color_example">Color value</div><input type="submit" value="Select color"/></div>');
            $(".this_color").html($(this).attr('value'));

        });
    });
}

Answer 1

试试这个：

$(this).find('#colors span').click(
        function() {

            var num = $(this).data('selnum');

            if (!num) {

                //keep the old color num, like 1000, 1001...
                num = $.trim($(this).html());

                $(this).data('selnum', num);
            }

            var oldSel = $('#colors span.selected_color');

            //make it just like before
            oldSel.removeClass('selected_color').empty().html(oldSel.data('selnum'));

            $(this).addClass('selected_color').html(
                    num + '<div class="this_color"><div class="color_example">Color value</div><input type="submit" value="Select color"/></div>');

            $(".color_example").html($(this).attr('value'));

            //the bg color
            var bgColor = $(this).css('background');

            //set the bgColor
            $(".color_example").css({
                background : bgColor
            });

        });

http://jsfiddle.net/rooseve/yKZP6/7/