javascript - $（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）が現在選択されているフィールドであることを認識していません。

誰かが私が間違っていることを理解するのを手伝ってもらえますか？

ありがとう！

score 7 · Accepted Answer

その時点で、$(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);
})

score 1 · Accepted Answer

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を変数に配置する必要があります。

score 0 · Accepted Answer

試す：

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

javascript - $（this）を関数に渡す

3 に答える 3

Related

Reference