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的关键点。任何帮助将不胜感激。

谢谢！中号

Answer 1

每次调用它时，

$(...)都会返回一个新对象。

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

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

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

Answer 2

绝对缺少一点理解。 jQuery使得允许用户自定义变得容易。您需要做的就是访问jQuery的原型，它们通过$.fn公开。一旦到位，可以使用您的扩展程序。

请注意，我选择了淡入淡出，以便显然它可以正常工作

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。这创建了一个函数对象，并且是一个完整的其他对话。

向jQuery对象添加新方法

2 个答案: