将$(this)传递给函数

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);
})