获取YUI中Clicked项的索引

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

Answer 1

有趣的问题！

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

对于（2）要实现您想要的，您需要显式循环NodeList或使用“委托”。 使用“委托”对页面来说效率更高，并允许您动态插入“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"));
    });
});

使用委托：

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');

Answer 2

关于1）...

一个html元素可能有多个类。 YUI确实插入了一些通用类，你得到它，而不是你的css类。 另外，你在不必具有相同css类的html元素列表上调用get（“class”），所以我不确定应该如何获得（“class”）这样的行为。

我不知道你的确切问题是什么，但也许hasClass（）方法可以帮到你？ 或者看一下Node api：http： //yuilibrary.com/yui/docs/api/classes/Node.html