Question

我正在努力实现这个ColorPicker插件：

http://www.eyecon.ro/colorpicker/

我有一个包含多个字段的表单，我希望在选择任何字段时弹出颜色选择器，并根据所做的选择更改值。

这是我的代码：

jQuery(function($) {
    function changeColor(e) {
        e.preventDefault();
        $(this).ColorPicker({
            onChange: function(hsb, hex, rgb) {
                $(this).attr('value', '#' + hex)
            }
        });
    }
    $('form.niceform input').live('mouseup', changeColor);
})

由于某种原因，$（this）.attr ...部分无法识别$（this）是当前选定的字段。

有人可以帮我理解我做错了吗？

谢谢！

Answer 1

此时，$（this）是颜色选择器，而不是您应用颜色选择器的元素。

尝试这样的事情：

jQuery(function($) {
    function changeColor(e) {
        e.preventDefault();
        var elem = $(this);
        elem.ColorPicker({
            onChange: function(hsb, hex, rgb) {
                elem.attr('value', '#' + hex)
            }
        });
    }
    $('form.niceform input').live('mouseup', changeColor);
})

编辑：正如Pointy指出的那样，你可以采取一些措施来改善这一点：

jQuery(function($) {
    function changeColor(e) {
        e.preventDefault();
        var elem = $(this);
        elem.ColorPicker({
            onChange: function(hsb, hex, rgb) {
                elem.val('#' + hex)
            }
        });
    }
    $('form.niceform input').on('mouseup', changeColor);
})

Answer 2

jQuery(function($) {
    function changeColor(e) {
        e.preventDefault();

        var self = $(this);

        self.ColorPicker({
            onChange: function(hsb, hex, rgb) {
                self.val('#' + hex);
            }
        });
    }
    $('form.niceform input').live('mouseup', changeColor);
});

您应该将$(this)功能置于ColorPicker功能之外。

Answer 3

尝试：

jQuery(function($) {
    function changeColor(e) {
        var self = this;
        e.preventDefault();
        $(self).ColorPicker({
            onChange: function(hsb, hex, rgb) {
                $(self).attr('value', '#' + hex)
            }
        });
    }
    $('form.niceform input').live('mouseup', changeColor);
})

将$（this）传递给函数

3 个答案: