如何使按钮的行为因选定的列表视图项而异

How to make button behave differently depending selected listview item?

本文关键字：视图 列表 按钮 何使      更新时间：2023-09-26

我正在创建一个jQuery Mobile网站，并且正在为一些基本概念而苦苦挣扎。例如，我有一个带有导航按钮的页眉，例如"在地图上显示"。在它下面，我有一个可折叠的列表视图，其中包含项目。当用户单击或展开列表视图项目时，如何使其在单击导航按钮以显示在地图上时，它将使用所选项目的 ID 来更新地图。基本上，一个按钮的 href 取决于当前选择的内容。我应该如何处理？我应该为此使用第三方库还是其他方法？

假设您有一个处理地图显示的对象：

var Map = new ( function() {
   this.selectedItem = null;
   this.changeSelectedItem = function( itemID ) {
      this.selectedItem = itemID;
   }
   this.displaySelectedItem = function() {
      // display item here using this.selectedItem
   }
} )();

如果您有这样的列表项：

<li class="listItems" data-id="1">Some Item</li>

然后，您可以像这样附加一个处理程序：

$( '.listItems' ).click( function() {
   var itemID = $( this ).data( 'id' );
   Map.changeSelectedItem.call( Map, itemID );
} );

通过这种方式，您将 UI 事件处理程序附加到 Map 对象的 changeSelectedItem 方法。类似地，可以将 displaySelectedItem 方法附加到 UI 处理程序。这有意义吗？

相关文章：