jquery mobile只有一个弹出许多列表项答案

【问题标题】：jquery mobile only one popup for many list itemsjquery mobile只有一个弹出许多列表项
【发布时间】：2013-12-12 16:46:28
【问题描述】：

我有以下代码用于 jquery 移动列表视图，每个列表项都有弹出选项。

希望只有一个弹出窗口，其中链接的 id 被传递给它，而不是每个列表项的新弹出窗口。如何将 id 传递到弹出窗口中？

    <div data-role="page">
        <div data-role="header">
             <h1>My page</h1> 
        </div>
        <div data-role="content">
            <ul data-role="listview">
                <li><a href="#thepopup" id="5" data-rel="popup" data-position-to="window" data-transition="pop"><h2>Item 1</h2></a>

                </li>
                <li><a href="#purchase" id="6" data-rel="popup" data-position-to="window" data-transition="pop"><h2>Item 2</h2></a>
            <p>Item 2 description</p></a>

                </li>
            </ul>
            <div data-role="popup" id="thepopup">
                <ul data-role="listview">
                    <li><a href="view.php?id=5">View details</a></li> 
HERE THE "5" SHOULD BE THE ID OF THE ITEM CLICKED ABOVE
                    <li><a href="edit.php?id=5">Edit</a></li>
                    <li><a data-rel="back" href="#">Cancel</a></li>
                </ul>
            </div>
        </div>
    </div>

【问题讨论】：

您可以动态创建弹出窗口。 stackoverflow.com/a/20505799/1771795
有没有办法简单地将 id 传递给硬连线弹出窗口？
确定这是可能的。 $(this).attr("id")点击事件将保存点击按钮的ID。
对，但是如何修改硬连线弹出窗口的链接？
您想在弹出列表视图中更改href="view.php?id=？

标签： listview jquery-mobile

【解决方案1】：

首先，popup div 应该是 page div 的直接子元素。

其次，您可以在单击列表项时以编程方式调用 popup。单击后，检索单击项目的 id 并将其添加到弹出窗口中的链接，然后将其打开。

$("li a").on("click", function (e) {

    // retrieve id
    var item_id = $(this).attr("id");

    // update links in popup with id retrieved
    // exclude cancel button [data-rel=back]
    $("#thepopup li a:not(:jqmData(rel=back))").each(function () {
        var current = $(this).attr("href").split("=");
        var href = current[0] + "=" + item_id;
        $(this).attr("href", href);
    });

    // open popup with desired transition
    $("#thepopup").popup("open", {
        "transition": "pop"
    });
});

Demo

【讨论】：