Question

我尝试在输入字段上创建多个颜色选择器实例，使用选择按钮启用颜色选择器并重置按钮以清除字段。问题是我想这样做而不向我的标记添加单独的类的负载，然后执行大量单独的jquery函数来匹配它。

这是我使用的jquery。

jQuery(document).ready(function($) {
$('.select_color').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();
});
});

$('.select_color').click(function() {
$('.link_color').val($.farbtastic('.color_picker').color);
});

$('.reset_color').click(function() {
  $('.link_color').val('');
  $('.link_color').css('background-color', '#fff');
});
});

这是我的标记。

function mb_setting_color() {
$options = get_option( 'mb-theme-options' );
?>
<input class="link_color" type="text" name="mb-theme-options[link_color]" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
<input type='button' class='select_color button-secondary' value='Select Color'>
<div class='color_picker' style='z-index: 100; background:#f1f1f1; position:absolute; display:none;'></div>
<input type='button' class='reset_color button-secondary' value='Reset'>
<?php
}

function mb_hover_setting_color() {
$options = get_option( 'mb-theme-options' );
?>
<input class="link_color" type="text" name="mb-theme-options[link_hover_color]" value="<?php echo esc_attr( $options['link_hover_color'] ); ?>" />
<input type='button' class='select_color button-secondary' value='Select Color'>
<div class='color_picker' style='z-index: 100; background:#f1f1f1; position:absolute; display:none;'></div>
<input type='button' class='reset_color button-secondary' value='Reset'>
<?php
}

有没有办法实现这一点，而无需添加更多的类和更少的jquery。

多个颜色选择器实例

0 个答案: