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或使用“委托”。 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');

Answer 2

关于1）......

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

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

获取YUI中Clicked项的索引

2 个答案: