Суть: Делаю настройку цвета двух элементов формы. Для этого использую небольшой плагин выбора цвета.
Проблема: При клике на воторой элемент цвет не появляется окошечко редактирования цвета, а на первом появляется без проблем.
Вопрос: Как решить данную проблему?
Html Код элементов:
<div>
<div style="float: left;"><input type="text" name="color" id="color" style="width: 100px;" value="<?=$myrow_fss['background_color_form'];?>"></div>
<div id="colorprivew" data-target="#color-picker" data-element="#form-fb-popup" style="float: right; width: 28px;height:29px; margin-right:51px; background-color: <?=$myrow_fss['background_color_form'];?>; border: 1px solid #333;cursor: pointer"></div>
</div>
<br>
<div>
<div style="clear:both;float: left;"><input type="text" name="color" id="color" style="width: 100px;" value="<?=$myrow_fss['text_color_form'];?>"></div>
<div id="colorprivew" data-target="#color-picker" data-element="#color-picker" style="float: right; width: 28px;height:29px; margin-right:51px; background-color: <?=$myrow_fss['text_color_form'];?>; border: 1px solid #333;cursor: pointer"></div>
</div>
Код окошечка изменения цвета:
<div id="color-picker" class="cp-default left">
<div class="ucrmicon close-item close-color">X</div>
<div class="picker-wrapper">
<div id="picker" class="picker"></div>
<div id="picker-indicator" class="picker-indicator"></div>
</div>
<div class="slide-wrapper">
<div id="slide" class="slide"></div>
<div id="slide-indicator" class="slide-indicator"></div>
</div>
</div>
Js код:
var typeleadsColorElement = undefined;
var ColorElement = undefined;
var slide = document.getElementById('slide');
var picker = document.getElementById('picker');
var slideIndicator = document.getElementById('slide-indicator');
var pickerIndicator = document.getElementById('picker-indicator');
//var colorInput = document.getElementById('new_status_color');
cp = ColorPicker(slide, picker, function(hex, hsv, rgb, mousePicker, mouseSlide) {
ColorPicker.positionIndicators(slideIndicator, pickerIndicator, mouseSlide, mousePicker);
if(typeleadsColorElement){
$(typeleadsColorElement).css('backgroundColor', hex);
$('' + ColorElement + '').css('backgroundColor', hex);
}
});
$('#colorprivew').on('click', function (event) {
// Получаем ID блока, который нужно показать
var elem = $(this).data("target");
ColorElement = $(this).data("element");
typeleadsColorElement = $(this);
// Показываем блок
$(this).after($(elem));
$(elem).slideDown(500);
//return '';
});
$('.close-color').bind('click', function (event) {
// Получаем ID блока, который нужно показать // Скрываем блок
$('#color-picker').slideUp(500);
});
colorprivew
неid
, а классом и соответственно в onclick тоже сделайте класс$('.colorprivew').on('click'
И должно заработать – Алексей Шиманский 21 окт '15 в 15:01