Javascript 对具有非唯一类名的元素执行操作

--在我开始之前，我应该说我正在尝试在没有库的情况下实现这一点。对不起，jQuery--

一般来说，当列表中没有项目具有唯一的类名或id时，我想知道在列表中使用事件监听器的最佳方法。更具体地说，我有：

目前，我有一个WinJS listView，它像指南中一样是数据绑定的。如您所见，列表中的任何项都没有唯一的元素id或类名。这给我带来了一个问题，因为我想在每个侦听器中添加一个单击侦听器，这样当您单击列表中的某个项目时，行为就会发生（如gif所示）。我需要一个子菜单出现在列表中对应于列表中相应项目的项目下方

如果它们都有唯一的ID和/或类名，这就足够容易了。但是由于没有，我在想，当有人点击一个项目时，你必须得到它是哪一个，然后向列表中你点击的项目下的所有项目添加一个类名，这样你就可以使用WinJS.createExpandAnimation函数将它们向下移动。然后关闭子菜单后，去掉所有添加的类名。这真的是最好的方法吗

我对完全删除listView持开放态度，但我希望以类似的方式进行数据绑定。有没有一种方法不使用listView（或其他库）来实现这一点，从而使生活更轻松

编辑： 我的代码的格式与Microsoft在演练中提供的相同

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width: 150px; height: 100px;">

        <!-- Displays the "picture" field. -->
        <img src="#" style="width: 60px; height: 60px;" 
             data-win-bind="alt: title; src: picture" />
        <div>

            <!-- Displays the "title" field. -->
            <h4 data-win-bind="innerText: title"></h4>

            <!-- Displays the "text" field. --> 
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>       

<div id="basicListView" data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
        itemTemplate: select('#mediumListIconTextTemplate')}">
</div>

---

老实说，我甚至不确定这是否适用于WinJS listView，所以我可能必须完全更改它以使用html列表或类似的东西

您可以使用

OnItemVoked

事件（）来处理ListView项的单击，并且单击的项将在事件处理程序的参数中可用

---

如何使用该值取决于您自己。使用它在ListView中插入一个项目，使用它在被调用的项目中显示一个隐藏的元素，等等。

向包装器添加一个事件侦听器，该包装器接受参数

e

，即事件。调用时，查看

e.target

（从中弹出事件）。在列表上循环并隐藏非目标的额外位，然后显示目标的额外位（如果隐藏）。如果你的问题中粘贴了生成的HTML，我会写一个纯JavaScript的例子。这可能很愚蠢，但是e.target会得到被点击的元素吗？如图所示：？更新了问题，使用了一些示例html，尽管正如我在底部提到的，我感觉这种行为在WinJS listView中可能不可能实现。但这还有待观察。好吧，我不想再唠叨了，但我想我可以将子菜单设置为listView模板中的另一个div，并在与列表交互之前将其可见性设置为“无”。

 (function () {
"use strict";

var dataArray = [
{ title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" }
];

var dataList = new WinJS.Binding.List(dataArray);

// Create a namespace to make the data publicly
// accessible. 
var publicMembers =
    {
        itemList: dataList 
    };
WinJS.Namespace.define("DataExample", publicMembers);