Question

预警：我是JQuery的新手。

我有一系列链接和列表，看起来像这样。它们是由我的后端框架动态生成的......

<ul>
  <li>
    <a id="link1" class="special" href="#">...</a>
    <ul id="list1"> ... </ul>
  </li>
  <li>
    <a id="link2" class="special" href="#">...</a>
    <ul id="list2"> ... </ul>
  </li>
  <li>
    <a id="link3" class="special" href="#">...</a>
    <ul id="list3"> ... </ul>
  </li>
</ul>

我正在尝试学习JQuery和Unobtrustive Javascript，所以我想在所有链接上添加一个点击处理程序，其中包含“特殊”类，它将切换相关列表。

因此...

$(document).ready(function() {
  $("a.special").click(function() {
     id = *magicFunctionToGetOwnID*
     $(convertListIDtoLinkID(id)).toggle
  })
})

我需要什么神奇的功能？如果我想获得我正在附加处理程序的东西的其他属性呢？比如，在将来，我添加了一个“toggle-target”属性，我希望得到它？

Answer 1

不确定如果我找对你，但看起来你想要这样的东西：

$(function() {
   $('ul:first').delegate('a.special', function( event ) {
       $(this).next('ul').toggle();
   });
});

在这种情况下，你不应该将事件处理程序绑定到所有节点。将一个处理程序绑定到共享父级并使用事件冒泡就足够了。

<强>更新
.delegate()正是我上面所描述的。它会将事件处理程序绑定到一个节点。诀窍是，如果该事件是从委派的节点的子节点触发的那个事件，则事件将通过冒泡DOM树“到达”我们的目的地（除非明确禁止事件冒泡）。但是，jQuery很好，并且总是将this绑定到目标节点（最初接收事件的节点）。

请阅读：http://api.jquery.com/delegate/

Answer 2

试试$(this).parent().find("ul").toggle()。这是不言自明的。

http://jsfiddle.net/gLu9a/

Answer 3

获取元素自己的id的方法是使用id属性。单击的元素在处理程序中设置为this，因此您可以使用this.id。

那就是说，这不是一种最佳技术。尽可能使用DOM关系，而不是设置ID。这将使您的代码更加灵活和直观。在这种情况下，您可以使用next方法获取跟随单击元素的DOM元素：

$(this).next().toggle();

有关调整选择的更多方法，请参阅API "traversing" category。

在单击处理程序中获取元素属性

3 个答案: