javascript - 如何根据所选的列表视图项使按钮的行为有所不同？

Question

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

Answer 1

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

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 处理程序。这有意义吗？