在jQuery对象上调用javascript函数

Question

我试图在我创建的jQuery元素上调用javascript函数,但似乎在函数上运行时不调用该函数.该函数在单独运行时有效,但在另一个jQuery对象上运行时则无效.这是功能:

$(document).ready(function() {
var $Chart = $('#Chart');
/*
 returns true if some Expand element is open
*/
function closeExpand() {
    alert("Hello");
    /*$(this).css("background-color", "black");*/
};
});

它可以在自己调用时运行:http://jsfiddle.net/5F5GF/

$('.ChartLink').click(function() {
    closeExpand();
    });
});

但是当调用另一个jQuery对象时不会:http://jsfiddle.net/dsHRN/

$('.ChartLink').click(function() {
    $Chart.closeExpand();
    });
});

我在这里做错了什么,如何在另一个对象上调用javascript函数？

Answer 1

您可以扩展jquery.fn(jquery prototype)来添加新函数,以便可以从jquery对象访问它:

尝试:

$.fn.closeExpand = function() {
   this.css("background-color", "black");
   return this; //for chaining
};
$Chart.closeExpand();

演示

您的函数closeExpand当前未与jquery对象原型相关联,通过将其添加到其原型,您可以使用jquery对象调用它.

或者你可以这样做:

$('.ChartLink').click(function() {
    closeExpand.call($(this));
});

和

function closeExpand() {
   this.css("background-color", "black");
};