Question

我正在使用http://www.eyecon.ro/colorpicker/中的颜色选择器并且效果很好，但我需要在页面上输入多个颜色，但初始化每个颜色都会很疯狂。因此，我将初始化代码包含在each()中并伴随this。我正在尝试更改背景颜色和值onchange。当我使用id或类来定位它时，它工作正常，但当用this替换时，我小提琴的第12行和第13行不起作用。最初的this可用于定位每个输入。

为什么会这样？（或者不是）

jsfiddle：jsfiddle

Answer 1

您引用了错误的this。尝试在最外层的选择器方法中定义变量，并使用它而不是$(this)：

$('.color-picker').each(function(){
    var self = $(this);
    $(this).ColorPicker({
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            self.css('backgroundColor', '#' + hex);
            self.val('#' + hex);
        }
    });
});

Answer 2

文档中并不是很清楚，但是colorPicker存储了对jQuery＆＃39; data中调用的元素的引用，你可以像这样访问它

$('.color-picker').ColorPicker({
    onShow: function (colpkr) {
        $(colpkr).fadeIn(500);
        return false;
    },
    onHide: function (colpkr) {
        $(colpkr).fadeOut(500);
        return false;
    },
    onChange: function (hsb, hex, rgb) {
        var el = $(this).data('colorpicker').el;
        $(el).css('backgroundColor', '#' + hex).val('#' + hex);
    }
});

请注意，您根本不需要每个循环，插件会在与选择器匹配的所有元素上初始化

它不能与this一起使用的原因是插件将this设置为colorPicker，即弹出的框，而不是输入。

FIDDLE

jQuery - colorpicker each（）和$（this）

2 个答案: