从打开的面板小部件 jQM 中获取当前选定的列表视图项答案

【问题标题】：Get current selected listview item from opened panel widget, jQM从打开的面板小部件 jQM 中获取当前选定的列表视图项
【发布时间】：2014-03-27 20:42:42
【问题描述】：

我有一个动态列表视图，其中列表项看起来类似于：

<li data-item="Item X"><a href="#myPanelWidget">Item X</a></li>

所以当点击一个项目时，一个面板会滑动打开。我可以得到我想要的数据，但只有列表视图中的第一项：

var item = $("myCollapsibleSet li").attr("data-item");

我怎样才能到达列表视图中当前选定的项目（导致面板打开的项目）。

jqm 是否会为选中的类添加一个类或其他东西？ jQuery 移动 1.4.0。可能是这样的：

var item = $("myCollapsibleSet li.current-selected").attr("data-item"); // ?

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

您可以在每个ListItem上处理点击事件，获取项目ID，然后在代码中打开面板。

DEMO

<ul data-role="listview">
    <li data-item="Item 1"><a href="#" class="itemPanel">Item 1</a></li>
    <li data-item="Item 2"><a href="#" class="itemPanel">Item 2</a></li>
    <li data-item="Item 3"><a href="#" class="itemPanel">Item 3</a></li>
    <li data-item="Item 4"><a href="#" class="itemPanel">Item 4</a></li>
</ul>

在代码中，处理分配给所有列表项（本例中为itemPanel）的类的点击事件，从父LI获取数据属性并将其存储在全局变量中，然后打开面板：

var selectedItem = '';
$(document).on("pagecreate", "#page1", function(){
    $(document).on("click", ".itemPanel", function(){
        selectedItem = $(this).parents("li").data("item");
        $("#myPanelWidget").panel("open");    
    });

    $("#btnSelected").on("click", function(){
        alert(selectedItem);
    });
});

【讨论】：

我之前也遇到过类似的情况，但是它变慢了，并且面板没有像我想要的那样平滑：$("#myListview").on("click", "li", function () { alert( $(this).attr("data-name") ); };
jQM 不会自动将列表项标记为已选中，因此您仍然需要处理单击以取消选择上一个 li 并选择单击的 li：jsfiddle.net/ezanker/T4nuN/1 可能不会提高性能...