對具有非唯一類名稱的元素執行操作

- 在開始之前，我應該說我試圖在沒有庫的情況下完成此操作。對不起jQuery -對具有非唯一類名稱的元素執行操作

在一般意義上，我想知道在列表中沒有唯一類名或ID的情況下使用事件偵聽器的最佳方式。更具體地說，我有這個：

目前，我有一個WinJS列表視圖是數據綁定像this指南。如您所見，列表中的項目沒有唯一的元素ID或類名。這是我的一個問題，因爲我想爲每個添加一個點擊監聽器，以便當您單擊列表中的某個項目時，會發生this行爲（如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>

，其中數據源是這樣定義的：

(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列表或類似的東西。

來源

2013-07-14 Jordan Plahn

添加一個事件監聽器給包含事件參數'e'的包裝器。當被調用時，查看'e.target'（事件從其中冒出）。循環播放你的列表並隱藏所有不是你的目標的額外位，然後顯示你的目標的額外位，如果它是隱藏的。如果在你的問題中生成了HTML，我會寫一個純粹的JavaScript例子。 –

這可能很愚蠢，但e.target會得到被點擊的元素？如下所示：https：//developer.mozilla.org/en-US/docs/Web/API/event.target？ –

更新了問題以使用一些示例html，雖然就像我在底部提到的，我有一種感覺，這種行爲可能無法用WinJS listView實現。但那還有待觀察。 –

您可以使用oniteminvoked事件（http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx）來處理ListView項目的單擊，並且單擊的項目將在事件處理函數的參數中可用。

你對這個價值做什麼取決於你。用它在ListView中插入一個項目，用它在被調用的項目中顯示一個隱藏的元素，等等。

來源

2013-07-16 20:55:52

對具有非唯一類名稱的元素執行操作

回答

相關問題