确定单击了列表中的哪个项-javascript

我有一个充满图片的winJS列表。当用户单击图像时，它们将被发送到第二个页面。是否有任何方法可以确定用户在第1页上单击了哪个图像（单击时，每个图像都会转到相同的第2页，但带有自定义div）。这是我声明的列表，然后我将向其推送项目：

var names_Array = [];

var names_List = new WinJS.Binding.List(names_Array);

var idPL;
names_List.push({ name: "man 1", image: "image/man1.png", ClientID: "1111" });

names_List.push({ name: "man 2 ", image: "image/man2.png", ClientID: "2222" }); 



idPL = document.getElementById("names_List");
                 idPL.addEventListener("iteminvoked", onclickItem);


function onclickItem(e) {
      console.log("Item clicked");
}

A在我填充div时，基于最后一次将哪个项目推到列表中，但我需要更灵活，能够选择第一个项目（即使在添加了第二个项目之后） 编辑：我现在收到一个错误“无法获取未定义或空引用的属性”addEventListener“。我想我已经在上面的代码中定义了它

或者分配一个全局并检查单击的内容并执行某些操作，或者分配一个每个项目并执行任何您需要的操作

更新：我无法演示如何使用WinJS，但这个例子应该足够了

HTML

---

在

上，您可以重新格式化图像URL，以包括：

散列：

image.html#man1.png

查询字符串：

image.html？image=man1.png

---

然后在加载第二个页面时使用JavaScript从URL中提取信息。

最好且最简单的方法是在eventlistener中为selectionchanged声明一个名称空间，其中包含图像的值，如下所示：

            listview.addEventListener("selectionchanged", function (item) {
            listview.selection.getItems().done(function (items) {
            WinJS.Namespace.define("imageInformation", {
                        seletedImage: items[0].data.image,
                    });
            }, false);

声明命名空间后，您可以在另一个页面上访问它：

var path = imageInformation.selectedImage;

---

要获得在winjs listview中单击哪个项的详细信息，我们可以使用winjs listview的itemInvoke事件

<div id="itemsList" data-win-control="WinJS.Binding.Template" style="display:none;">

       <div data-win-bind="className: type">
             <img src="#" style="width: 100px; height: 100px;" 
                 data-win-bind="alt: title; src: picture" />

           <div>
            <h4 data-win-bind="innerText: title" style="width:100px; height:20px;"></h4>
           </div>
           <div>
               <img  id="like"src="images/like.png" class="win-interactive"  data-win-bind="alt:title; onclick: LikeClick;" />
               </div>
       </div>

    </div>

 <div id="UserListView" data-win-control="WinJS.UI.ListView" style="border-top: 5px solid #000; min-width:500px;" 
           data-win-options="{
                               selectionMode:'multi',
                               itemTemplate:select('#itemsList'),
                               layout:{    
                               type:WinJS.UI.GridLayout}}"
         > 

    </div>

在此列表视图中，我们仅显示用户的图像和标题

var path = imageInformation.selectedImage;

<div id="itemsList" data-win-control="WinJS.Binding.Template" style="display:none;">

       <div data-win-bind="className: type">
             <img src="#" style="width: 100px; height: 100px;" 
                 data-win-bind="alt: title; src: picture" />

           <div>
            <h4 data-win-bind="innerText: title" style="width:100px; height:20px;"></h4>
           </div>
           <div>
               <img  id="like"src="images/like.png" class="win-interactive"  data-win-bind="alt:title; onclick: LikeClick;" />
               </div>
       </div>

    </div>

 <div id="UserListView" data-win-control="WinJS.UI.ListView" style="border-top: 5px solid #000; min-width:500px;" 
           data-win-options="{
                               selectionMode:'multi',
                               itemTemplate:select('#itemsList'),
                               layout:{    
                               type:WinJS.UI.GridLayout}}"
         > 

    </div>

    var name=evt.detail.itemPromise._value.data.title;
    var picturePath=evt.detail.itemPromise._value.data.picture;
}