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

【问题标题】：How to make button behave differently depending selected listview item?如何根据所选的列表视图项使按钮的行为有所不同？
【发布时间】：2012-08-07 16:27:43
【问题描述】：

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

【问题讨论】：

我想您可以处理更改列表视图中的选定项目并更改按钮单击的单击处理程序。我会找一些示例代码。

标签： javascript jquery jquery-mobile jquery-events

【解决方案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 处理程序。这有意义吗？

【讨论】：

您可能还希望将选定的（突出显示）类附加到选定的列表项，以及从所有其他列表项中删除该类。这样用户也知道选择了哪个项目。
确实有道理，但是 onclick 没有触发。也许是因为 JQM 接管了，或者是错误的元素？我尝试在
上绑定点击事件
我想我找到了另一个线程：stackoverflow.com/questions/8399882/… 感谢您的巨大帮助！