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

发布于 2024-11-09 10:38:31 字数 877 浏览 0 评论 0原文

预警：我是 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，因此我想在所有具有“special”类的链接上添加一个单击处理程序，该处理程序将切换相关列表。

那么...

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

我需要什么神奇的功能呢？如果我想获取我附加处理程序的对象的其他属性怎么办？比如说，将来我添加一个“切换目标”属性，我想得到它？

原文

Forewarning: I'm a newbie to JQuery.

I have a collection of links and lists that look something like so. They're dynamically generated by my back end framework...

<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>

I'm trying to learn JQuery and Unobtrustive Javascript, so I want to add a click handler on all the links with the class "special" that will toggle the related lists.

So...

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

What is the magic function that I need? What about if I want to get other properties of the thing I'm attaching a handler to? Say, in the future, I add a "toggle-target" property and I would want to get that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青衫负雪 2024-11-16 10:38:31

不确定我是否理解正确，但看起来您想要这样的东西：

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

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

更新
.delegate() 的作用正是我上面描述的。它将事件处理程序绑定到一个节点。诀窍是，如果该事件在委托节点的子节点上触发，则事件将通过向上冒泡 DOM 树“到达”我们的目的地（除非明确禁止事件冒泡）。然而，jQuery 很好，总是将 this 绑定到目标节点（最初接收事件的节点）。

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

Not sure If I get you right, but it looks like you want something like this:

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

You don't should bind an event handler to all nodes in a situation like that. It's enough to bind one handler to a shared parent and make use of the event bubbling.

Update
.delegate() does exactly what I described above. It'll bind the event handler to a node. The trick is, that event if that event is triggered on a child node from the delegated node, the events will "reach" our destination by bubbling up the DOM tree (unless explicitly prohibit event bubbling). However, jQuery is nice and will always bind this to the target node (the node which originally received the event).

Have a read: http://api.jquery.com/delegate/

回复收藏 0 原文

冷情 2024-11-16 10:38:31

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

http://jsfiddle.net/gLu9a/

回复收藏 0 原文

时常饿 2024-11-16 10:38:31

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

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

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

请参阅 API“遍历”类别了解更多调整方法一个选择。

The way to get an element's own id is with the id property. The element that was clicked is set as this within the handler, so you can use this.id.

That said, this is not an optimal technique. Use DOM relationships, rather than setting ids, wherever you can. This will make your code more flexible and intuitive. In this case, you can use the next method, to get the DOM element that follows the element that was clicked: