1

我正在开发一个 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>

HTML 输出：

<form method="POST" action="">  

                        <div>

            <br />

            <label for="color_1"><strong>Post Title</strong></label>

            <input type="text" class="color-picker" id="color_1" value="#273990" name="color_1" />

            <div id="color_1_color" class="fabox"></div>

            </div>

                        <div>

            <br />

            <label for="color_2"><strong>Paragraph Text</strong></label>

            <input type="text" class="color-picker" id="color_2" value="#840000" name="color_2" />

            <div id="color_2_color" class="fabox"></div>

            </div>

                        <div>

            <br />

            <label for="color_3"><strong>Example</strong></label>

            <input type="text" class="color-picker" id="color_3" value="#4377df" name="color_3" />

            <div id="color_3_color" class="fabox"></div>

            </div>

                        <div>

            <br />

            <label for="color_4"><strong>And Another Example</strong></label>

            <input type="text" class="color-picker" id="color_4" value="#3c8400" name="color_4" />

            <div id="color_4_color" class="fabox"></div>

            </div>

                        <p><input type="submit" name="update_options" value="Update Options" class="button-primary" /></p>

        </form>

    </div>
4

2 回答 2

2

您使用 jQuery 选择器引用的元素范围太广。本质上，您的代码说每次单击该类的任何内容时color-picker，都会显示该类的任何内容fabox。

您应该使您的引用更具体到当前单击的.color-picker.

我建议更换这个：

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

有了这个：

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

因此，您仅引用.fabox连接到.color-picker您刚刚单击的那个。

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

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

只要.fabox总是跟随着.color-picker。

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

$(this).next('.fabox').fadeIn();
于 2012-05-03T16:29:56.750 回答
1

你不需要使用for (e in foo)using 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();
    });
});​

而且我认为您的问题可能是 idtencial IDs 所以它混淆了插件，但公平地说，如果您发布 HTML 输出而不是 PHP 代码会更容易，因为它是我们想要查看的 DOM，而且如果不知道是什么就很难猜测PHP 变量正在输出。

于 2012-05-03T16:04:43.677 回答