javascript - 如何根据所选 ListView 项目使按钮表现不同？

Question

我正在创建一个 jQuery Mobile 网站，并且正在努力解决一些基本概念。例如，我有一个带有导航按钮的页面标题，例如“在 map 上显示”。在它的下面，我有一个包含项目的可折叠 ListView 。当用户单击或展开 ListView 项目时，如何才能使他们单击导航按钮以显示在 map 上时，它将使用所选项目的 ID 来更新 map 。基本上，一个按钮的 href 取决于当前选择的内容。我应该如何处理这个问题？我应该使用第三方库来实现此方法还是其他方法？

Answer 1

假设您有一个处理 map 显示的对象:

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