当您单击离开虹膜颜色选择器时，如何关闭它？答案

【问题标题】：How do you close the Iris colour picker when you click away from it?当您单击离开虹膜颜色选择器时，如何关闭它？
【发布时间】：2013-11-10 01:16:48
【问题描述】：

我在 Wordpress 插件中使用iris colour picker。我可以让它显示，然后在关联的输入中显示点击的值就好了，但是有一个问题......

我无法摆脱这个盒子！有没有办法让框在你点击时消失？

我正在使用这个简单的调用调用iris -

jQuery(document).ready(function($){
    $('.colour-picker').iris();
});

常识告诉我，我应该能够将此作为选项传递给 .iris() 函数以满足此特定需求，但我在 docs 中找不到对此类选项的任何引用。

我发现的壁橱是你可以调用hide 方法，但它列出的只是$(element).iris('hide');，根本没有解释如何将它链接到第一个调用iris 的特定输入速度，或者如何检测用户是否点击离开iris

有没有人使用iris 并且知道如何实现我想要做的事情？谢谢。

附加 - 这是一个JS fiddle，它演示了所描述的问题。调用iris的JS可以在JS部分的底部找到。

【问题讨论】：

你能创建一个jsFiddle吗？
当然，我已经更新了我的问题。

标签： jquery wordpress colors

【解决方案1】：

为了它的价值，你不需要直接调用 iris。从 3.5 开始，WordPress 核心定义了一个名为 wpColorPicker() 的包装器方法，它实现了具有一些附加功能的 iris：

http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/

这个包装器会为您处理选择器的所有隐藏和显示，并跟踪各个实例。

如果您正在构建一个 WP 插件，最好使用他们的包装器，因为他们将来会为其添加新功能。另外，如果他们决定使用 iris 以外的其他库，您的插件代码可能会中断。包装器会阻止这种情况发生。

【讨论】：

这对我帮助很大。非常感谢。

【解决方案2】：

你可以试试这样的：

jQuery(document).ready(function ($) {    
    $('.colour-picker').iris();    
    $(document).click(function (e) {
        if (!$(e.target).is(".colour-picker, .iris-picker, .iris-picker-inner")) {
            $('.colour-picker').iris('hide');
            return false;
        }
    });
    $('.colour-picker').click(function (event) {
        $('.colour-picker').iris('hide');
        $(this).iris('show');
        return false;
    });
});

Updated fiddle

【讨论】：

谢谢，我们已经到了某个地方。这有两个问题 - 1：我有多个实例，从一个调用 iris 的输入单击到另一个输入仍然会导致 2x 颜色选择器。 2：一旦iris被隐藏，就不能再为那个实例显示（大概是因为它是一个'hide'方法，而不是一个'close'方法，貌似不存在）。
对不起，我测试得不好。我已经更新了小提琴。我认为它现在涵盖了所有内容:)
抱歉，我这几天没上班。我测试了第一件事，它似乎已经成功了。谢谢。
我向Iris GitHub page 添加了一个功能请求，要求设置自动执行此操作。希望他们会注意到，因为如果我是唯一一个遇到这个问题的人，我会感到惊讶......
是的，这绝对应该是 OOTB 功能。

【解决方案3】：

你可以试试下面的

$('input:not(.colour-picker)').iris('hide');

【讨论】：

在什么情况下我会声明呢？简单地在ready 中声明它会导致错误，因为我会在iris 初始化之前尝试调用方法hide。