我正在为我的项目选择颜色选择器,客户可以点击颜色,然后点击颜色弹出,这样您就可以选择/提交此颜色。
我想将样式(因此颜色代码)添加到“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'));
});
});
}
答案 0 :(得分: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
});
});