Javascript Farbtastic多字段-Wordpress

我正在开发一个wordpress主题。我现在正在处理主题选项页面。我添加了farbtastic（4个字段），问题是每次单击输入时，颜色选择器也会出现在其他3个字段上。有人知道怎么解决这个问题吗？谢谢大家!

<div> <br />
  <label for="<?php echo $colorPicker['ID']; ?>"><?php _e($colorPicker['label']); ?></label>
  <input type="text" class="color-picker" id="<?php echo $colorPicker['ID']; ?>" value="<?php echo get_option($colorPicker['ID']); ?>" name="<?php echo $colorPicker['ID']; ?>" />
  <div id="<?php echo $colorPicker['ID']; ?>_color" class="fabox"></div>            </div>          
<?php endforeach; ?>            
<p><input type="submit" name="update_options" value="Update Options" class="button-primary" /></p>
</form>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
    var colorPickers = $('.color-picker');
    console.log(colorPickers);
    for (e in colorPickers) {
        if (colorPickers[e].id != undefined) {
            var colorPickerID = colorPickers[e].id;
            $('#' + colorPickerID + '_color').farbtastic('#' + colorPickerID);
        }
    }

    $('.fabox').hide();


    $('.color-picker').click(function() {
        $('.fabox').fadeIn();
    });

    $(document).mousedown(function() {
        $('.fabox').each(function() {
            var display = $(this).css('display');
            if (display == 'block') $(this).fadeOut();
        });
    });
});​
</script>

您不需要使用
for（foo中的e）
来使用
jQuery.each（）
，它更干净，这里的e是一个非常糟糕的全局变量，每个错误都不会发生

也可以使用
$（function（）{}）
而不是
$（document）.ready（function（）{}）它的功能完全相同，但占用的空间更好，代码更易于阅读

在dom就绪函数中，您不需要$作为参数，当您需要一个闭包时，这是一种保证$在闭包中是jQuery的方法

(function($) {
  // your code
})(jQuery);

因此，您的代码最终会变成这样，而不是您现有的代码

$(function() {

    $('.color-picker').each(function() {
        if (this.id) {
            $('#' + this.id + '_color').farbtastic('#' + this.id);
        };
    }).click(function() {
        $(this).next().fadeIn();
    });

    $('.fabox').hide();

    $(document).mousedown(function() {
        $('.fabox:visible').fadeOut();
    });
});​

我认为您的问题可能是ID，因此它会混淆插件，但公平地说，如果您发布HTML输出而不是PHP代码，这会更容易，因为这是我们想要看到的DOM，并且在不知道PHP变量输出的情况下很难猜测。
您使用jQuery选择器引用的元素太广泛。基本上，您的代码表示，每次使用
颜色选择器
类单击任何内容时，都会使用
fabox
类显示任何内容

您应该使您的引用更具体到当前单击的
。颜色选择器

我建议更换这个：

$('.fabox').fadeIn();

为此：

$(this).parent().find('.fabox').fadeIn();

因此，您只引用了连接到刚才单击的
.color picker
的
.fabox

编辑：正如gillesc所指出的，它实际上会更快地使用：

$(this).next().fadeIn();

只要
.fabox
始终遵循
.color picker

如果
.fabox
位于同一容器内，但不是您可以使用的下一个元素：

$(this).next('.fabox').fadeIn();

我认为您使用jQuery选择器引用的元素太广泛了。基本上，您的代码表示，每次使用
颜色选择器
类单击任何内容时，都会使用
fabox
类显示任何内容。您应该使您的引用更具体到当前单击的
。颜色选择器
。可能会替换
$（'.fabox'）.fadeIn（）与
$（this.parent（）.find（'.fabox'）.fadeIn（），或类似的东西。ericissocial非常感谢您的帮助。你提供的代码发挥了神奇的作用！非常感谢！谢谢你的回复。您提供的代码不仅没有像我希望的那样工作，而且现在farbtastic根本无法工作。我编辑了这篇文章以提供HTML输出。很抱歉，我没有办法测试它。啊，当您执行$（'.fabox'）.hide（）时，您的问题就在这里；你隐藏了，当你做fadeIn（）时，你也会做同样的事情，因为它是一个类，所有包含该类的元素都会受到影响，因此它们都会显示出来。因此，您需要相对于元素单击横切DOM。我将更新我的邮件，因为您的颜色选择器位于.fadbox
$（this.next（）.fadeIn（）的旁边
在点击处理程序中应该做与ericissocial告诉我的相同的事情，是的，这就成功了！非常感谢你们两位！！！您还可以使用：visible伪选择器抓取可见的一个并隐藏它
$（'.fabox:visible'）.fadeOut（）
$(this).next('.fabox').fadeIn();