在jQuery对象上调用用户定义的函数

Question

我希望单击文本时更改其颜色。 这是我现在正在使用的代码：

$(document).ready(function() {
    $("#colorChanger p").click(function() {
        $(this).changeColor();
    });

    function changeColor() {
        $(this).css("color", "white");
    };
})

我在JSFiddle上也有此代码。 我的代码出了什么问题？

Answer 1

更新了小提琴： http : //jsfiddle.net/xME2L/5/

如果希望添加一个函数，以便可以在$（）返回的任何值上调用它，则必须使用：

$.fn.functionName = function() {}

Answer 2

这是我的解决方案 。 您没有将对象正确传递给changeColor函数。 我还建议在document.ready函数之外声明changeColor。

Answer 3

changecolor函数从未分配给jquery el对象。

agmcleod解决方案的替代方法是：

$(document).ready(function(){

        $("#colorChanger p").click(function(){
           changeColor($(this));
         });

        function changeColor(el){
            el.css("color","white");
        };
});

http://jsfiddle.net/dq6yv/

Answer 4

作为替代agmcleod的解决方案 ，你可以调用changeColor这种方式（不改变changeColor ）：

changeColor.call(this);

在此处演示更改。

Answer 5

如果要像$（this）.changeColor（）;一样调用它，则应将changeColor定义为JQuery插件。 ：

$(document).ready(function(){            
    $("#colorChanger p").click(function(){
        $(this).changeColor();
    });

    $.fn.changeColor = function() {
      this.css("color","white");
    };

}）