Question

我有一个动态列表视图，列表项看起来与此类似：

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

因此，当点击某个项目时，面板将会滑开。我可以获得我想要的数据，但只能看到listview中的第一个项目：

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

如何进入列表视图中的当前所选项目（导致面板打开的项目）。

jqm是否为选定的类添加了类或其他内容？ jQuery Mobile 1.4.0。也许是这样的：

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

Answer 1

您可以处理每个ListItem上的click事件，获取项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>

在代码中，处理分配给所有列表项的类的click事件（本例中为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);
    });
});

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

1 个答案: