javascript - 在 YUI 中获取点击项的索引

Question

我有以下代码。

HTML

<ul>
    <li class="link"> link 1 </li>
    <li class="link"> link 2 </li>
    <li class="link"> link 3 </li>
    <li class="link"> link 4 </li>
</ul>\

JavaScript

 YUI().use("node", function(Y){

    Y.all(".link").on("click", function(em){
       alert("you clicked on "+ index +"link .");
       node = em.currentTarget;
       node.addClass("clicked");
       // alert(node.get("class"));
    });
     alert(Y.all("li").get("class"));
});

我对此有两个疑问。

1) 虽然第一次警报它应该显示类名“链接”，但它会发出一些 YUI_23123_ 随机数的警报。为什么会这样？

2) 我也想提醒索引。例如，当用户点击第三个链接时，它应该提醒“你点击了 3 个链接”，我也想在其他事件中使用这个索引值。

我们如何才能实现索引？

JSFiddle link

Answer 1

有趣的问题!

对于 (1) Y.all(...) 返回一个 NodeList。不幸的是，nodeList 的“get”返回值奇怪地是另一个 NodeList，它在打印警报时被解释为您所看到的。使用“getAttribute”而不是“get”会产生更合理(尽管可能没有用)的输出。

对于 (2) 要实现您想要的，您将需要显式循环 NodeList 或使用“委托(delegate)”。 Using "delegate"对于页面来说效率要高得多，并允许您动态插入“li”项，但是“indexOf”对于成百上千个列表项可能会明显变慢。

使用每个:

Y.all(".link").each(function (node, index) {

    node.on("click", function(em){
        alert("you clicked on "+ index +" link.");
        node.addClass("clicked");
        alert(node.getAttribute("class"));
    });
});

使用委托(delegate):

Y.one('ul').delegate("click", function (em) {
    var itemList =  em.container.all('li');;
    var node = em.currentTarget;
    alert("you clicked on "+ itemList.indexOf(node) +" link.");
    node.addClass("clicked");
    alert(node.getAttribute("class"));
}, 'li');