我的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/