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

Question

--在开始之前，我应该说我正在尝试在没有库的情况下完成此任务。对不起 jQuery--

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

目前，我有一个像 this 那样进行数据绑定(bind)的 WinJS listView指导。正如您所看到的，列表中的任何项目都没有唯一的元素 id 或类名。这给我带来了一个问题，因为我想为每个监听器添加一个单击监听器，这样当您单击列表中的某个项目时，this行为发生(如 gif 所示)。我需要一个子菜单出现在列表中与列表中相应项目相对应的项目下方。

如果它们都有唯一的 ID 和/或类名，这将很容易。但由于他们不这样做，我在想，当有人单击某个项目时，您必须获取它是哪一个，然后将类名添加到您单击的项目下方的列表中的所有项目中，以便您可以使用将它们向下移动WinJS .createExpandAnimation 函数。然后，一旦子菜单关闭，就删除所有添加的类名。这真的是最好的方法吗？

我愿意完全删除 listView，但我想要一种以类似方式进行数据绑定(bind)的方法。有没有一种方法可以不使用 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>

其中 dataSource 定义如下:

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

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

Answer 1

您可以使用 oniteminvoked 事件 ( http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx ) 来处理 ListView 项目的单击，并且被单击的项目将在事件处理程序的参数中可用。

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