向 jQuery 对象添加新方法 [重复]

Question

我正在创建一个导航栏，该导航栏将根据您所在网站的哪个页面打开（PHP 生成的“选定”类）

我正在尝试在 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

Answer 1

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

相反，您需要将您的方法添加到 jQuery 的 prototype：

$.fn.showSelected = function() { ... };

然后可以通过所有 jQuery 对象访问它。

Answer 2

肯定少了一点理解。 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。这会创建一个函数对象，这是一个完全不同的对话。