Несколько colorpicker на той же странице

Question

Я создаю панель инструментов параметров для моей темы Wordpress, и мне удалось работать почти все, но вот что: я добавил colorpicker и работал супер! Если вы нажмете в поле ввода, появится всплывающее окно colorpicker, чтобы вы могли выбрать цвет (или вместо HEX вместо этого), а затем, если вы выйдете за пределы colorpicker, он исчезнет.

Но если я добавлю второй, первый вход выталкивает цветной указатель и берет значение цвета в BOTH-входы, и после нажатия за пределами поп-функции он не исчезнет. Тогда, если я нажму на второй вход, colorpicker не появится.

В другом случае, если я нажму первый второй, цветной указатель появится, но любой из входов примет значение.

Мой код заключается в следующем:

HTML и PHP:

case 'colorpicker': 
?> 

<div class="options_input options_text color-picker"> 

<input class="pickcolor" name="<?php echo $value['id']; ?>" 
id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" 
value="<?php if (get_option($value['id']) != "") { 
echo stripslashes(get_option($value['id']) ); } else { echo $value['std']; } ?>" /> 

      <div id="colorpicker"></div> 
</div> 

<?php 
break; 

Мои ЯШ:

jQuery(document).ready(function($) { 
$('#colorpicker').hide(); 
$('#colorpicker').farbtastic('.pickcolor'); 

$('#color').click(function() { 
    $('#colorpicker').fadeIn(); 
}); 

$(document).mousedown(function() { 
    $('#colorpicker').each(function() { 
     var display = $(this).css('display'); 
     if (display == 'block') 
      $(this).fadeOut(); 
    }); 
}); 

});

jQuery(document).ready(function($) { 

$('.pickcolor').click(function(e) { 
colorPicker = jQuery(this).next('div'); 
input = jQuery(this).prev('input'); 
$(colorPicker).farbtastic(input); 
colorPicker.show(); 
e.preventDefault(); 
$(document).mousedown(function() { 
    $(colorPicker).hide(); 
}); 
}); 

});

Может ли кто-нибудь помочь мне настроить js, чтобы он работал с несколькими двойными полями?

Answer 1

Не уверен, что это все еще актуально или нет ... Но я нашел this demo на HTMLDrive, чтобы сделать трюк.

В принципе, он уже встроен в farbtastic plugin ... Его нужно настроить правильно, тогда вы просто назначаете сборщик на требуемое текстовое поле для какого-либо действия.

var farbPicker = $.farbtastic('#colorpicker'); 

$('.tbColourPicker').each(function() 
{ 
    farbPicker.linkTo(this); 
}) 

$('.showColourPanel').click(function() 
{ 
    var targetObject = input you want to edit; 
    farbPicker.linkTo(targetObject); 
}); 

Единственное, что вам нужно для просмотра, - это иметь значения по умолчанию в текстовых полях перед редактированием с помощью сборщика.