向jQuery对象添加新方法

Adding new methods to jQuery objects

本文关键字：新方法 添加 对象 jQuery      更新时间：2023-09-26

我正在创建一个导航栏，它将根据你所在的网站页面(PHP生成的"selected"类)打开

我试图使一个方法在jQuery和附加到某些对象的id。我想让它尽可能模块化，我猜——我正试图学习更多关于javascript中的OOP的知识。

这是我的HTML:

<div id="workNav">Work</a></div>
<div  id="workNavContents">
  <a class="selected" href="foo.html">Video/Film</a>
  <a class="" href="foo.html">Photography</a>
</div>
<div id="clientsNav"><a href="#">Clients</a></div>
<div id="clientsNavContents">
  <a href="foo.html">Agencies/Clients</a>
  <a href="foo.html">Directors/Photographers</a>
</div>

和我的Javascript:

var showSelected = new function(){
    if ($(this).children('.selected')){
        $(this).show();
    }
}
$('#workNavContents').showSelected = showSelected; 
$('#workNavContents').showSelected();
$('#clientNavContents').showSelected = showSelected; 
$('#clientNavContents').showSelected();

有些东西告诉我，我严重错过了jQuery与javascript的关键点。如有任何帮助，不胜感激。

谢谢!M

$(...)每次调用时都会返回一个新对象。

相反，你需要将你的方法添加到jQuery的原型: 
$.fn.showSelected = function() { ... };

显然缺少一点理解。jQuery使得允许用户自定义变得很容易。您所需要做的就是访问他们通过$.fn公开的jQuery原型。一旦设置好，您的扩展名就可以使用了。

注意，我选择了淡出，所以很明显，它的工作

var showSelected = function(){
  if ($(this).children('.selected')){
    $(this).hide().fadeIn(2000);
  }
}
$.fn.showSelected = showSelected;//you could also simply assign the function to this
$('#workNavContents').showSelected();

下面是一个演示:http://jsfiddle.net/mEgsX/

还请注意，您不需要在函数上使用new。这创建了一个函数对象，是另一个完整的对话。

相关文章：