Почему такое происходит, появляется лишний блок?

Question

[Александр Сизинцев]

Сначала я попробовал изменить при первом нажатии - работает, отлично изменяет цвет элемента, но дальше при выборе другого второго элемента и подборе для него цвета почему-то появляется еще одно поле выбора цвета (непонятно, почему), и при изменении цвета меняется цвет и придыдущего элемента.

Вопрос: как решить проблему?

Код такой:

// При наведении на ссылку
                        $('.color-status').bind('click', function (event) {

                            // Получаем ID блока, который нужно показать
                            var title = $(this).data("target");
                            var statuscolor = $(this).data("statuscolor");

                            // Показываем блок
                            $(this).after($(title));
                            $(title).slideDown(500);

                                    cp = ColorPicker(document.getElementById('slide'), document.getElementById('picker'), 
                                    function(hex, hsv, rgb, mousePicker, mouseSlide) {
                                        currentColor = hex;
                                        ColorPicker.positionIndicators(
                                            document.getElementById('slide-indicator'),
                                            document.getElementById('picker-indicator'),
                                            mouseSlide, mousePicker
                                        );

                                        document.getElementById('status-id-'+ statuscolor +'').style.backgroundColor = hex;
                                        document.getElementById('color').value = hex;

                                    });
                            return '';
                        });

Answer 1

[Reey]

Не знаю поможет ли, но строчку

cp = ColorPicker(document.getElementById('slide'), document.getElementById('picker'),

надо заменить на

var cp = ColorPicker(document.getElementById('slide'), document.getElementById('picker'),

upd:
Ответ на второй комментарий:
Да, ведь за пределами замыкания, statuscolor не определен.
Вообще, у меня смутное сомнение, что тут слишком много всё завязоно на id, и это плохо. Чувствую, что при закрытии тултипа эти айди не удаляются и колор-пиккер при инициализации заново их создает. Лучше всё на классы переделать.

Самый непонятный момент это с тем откуда берется элемент куда вставляется пиккер. Это title который? При закрытии пиккера он удаляется? Элементы #slide и #picker находятся в нем?
хтмла бы, или пример в codepen.io

(function(){
	var statusColorElement = 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('color');

	cp = ColorPicker(slide, picker, function(hex, hsv, rgb, mousePicker, mouseSlide) {
		ColorPicker.positionIndicators(slideIndicator, pickerIndicator, mouseSlide, mousePicker);

		if(statusColorElement){
			$(statusColorElement).css('backgroundColor', hex);
			colorInput.value = hex;
		}
	});

	$('.color-status').bind('click', function (event) {

		// Получаем ID блока, который нужно показать
		var title = $(this).data("target");
		var statuscolor = $(this).data("statuscolor");
		statusColorElement = $('#status-id-'+statuscolor);

		// Показываем блок
		$(this).after($(title));
		$(title).slideDown(500);

		return '';
	});
})()

Comments

[Александр Сизинцев]

не помогло =(

[Александр Сизинцев]

Это работает, только если часть кода, который отвечает за выбор цвета находится вне функции с которой связан клик, но тогда перестает работать обновление цвета элемента строчка document.getElementById('status-id-'+ statuscolor +'').style.backgroundColor = hex; перестает работать. =(

[Александр Сизинцев]

Спасибо вы решили мою проблему в полной мере.