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