Question

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

希望只有一个弹出窗口，其中链接的ID传递给它，而不是每个列表项的新popuo。如何将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>

Answer 1

首先，弹出 div应该是 page div的直接子项。

其次，您可以在单击列表项时以编程方式调用弹出。点击后，检索点击项目的 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

jquery mobile只有一个弹出窗口，用于许多列表项

1 个答案: