获取在YUI中点击的项目的索引

问题描述：

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

答

有趣的问题！（1）Y.all（...）返回一个NodeList。不幸的是，getList对于nodeList的返回值奇怪地是另一个NodeList，它在打印警报时被解释为所见。使用“getAttribute”而不是“get”会产生更合理的（尽管可能不是有用的）输出。（2）为了实现你想要的，你需要显式地遍历NodeList或使用“委托”。 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")); 
    }); 
});

使用委托：

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

非常感谢代码，我测试了其工作的罚款。 :) –

答

关于1）...

一个HTML元素可以有多个类。 YUI确实插入了它的一些泛型类，而不是你的css类。此外，你不必具有相同的CSS类的html元素列表上的get（“类”），所以我不知道如何得到（“类”）的行为正确的方式。

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

获取在YUI中点击的项目的索引

相关推荐