Question

我在弹出窗口中遇到动态网址的问题。这是我的代码：

<!-- content -->
<ul data-role="listview">
    <li data-role="list-divider">Group 1</li>
        <li data-icon="false"><a href="person.php?id=1#popup-menu" data-rel="popup" data-transition="slideup">List 1a</a></li>
        <li data-icon="false"><a href="person.php?id=2#popup-menu" data-rel="popup" data-transition="slideup">List 1b</a></li>

    <li data-role="list-divider">Group 2</li>
        <li data-icon="false"><a href="person.php?id=3#popup-menu" data-rel="popup" data-transition="slideup">List 2a</a></li>
</ul><!-- /content -->

<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
    <ul data-role="listview" style="min-width:210px;">
        <li data-role="divider">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Share</a></li>
    </ul>
</div><!-- /popup-menu -->

基本上，当我点击弹出窗口上的链接时，我会转到被叫方网址所在的页面。

因此，如果我点击列表1a ，则弹出窗口显示，然后点击查看详细信息页面将我指向网址 person.php？id = 1 < /强>

我该怎么做？

我可以根据列表的数量多次创建弹出div，但我认为这是浪费DOM对象（如果我找不到任何优雅的解决方案，我的最后一招）

由于

Answer 1

由于你实际上只需要将一个人的id传递给你的弹出窗口，你可以通过这种方式实现你的目标：

首先简化listview标记并将id存储在listview项目锚点的data-id属性中

<ul data-role="listview" id="list">
    <li data-role="list-divider">Group 1</li>
        <li data-icon="false"><a href="#" data-id="1">List 1a</a></li>
        <li data-icon="false"><a href="#" data-id="2">List 1b</a></li>

    <li data-role="list-divider">Group 2</li>
        <li data-icon="false"><a href="#" data-id="3">List 2a</a></li>
</ul>

并在弹出窗口中添加id标记到“查看详情”锚点，以便以后更轻松地访问

<li><a id="details" href="#">View details</a></li>

第二次在click()事件存储当前ID到全局可用变量（让我们称之为currentId）并以编程方式打开弹出窗口。

var currentId = 0;
...
$('#page').on('pageinit', function(){
    $('#list li a').click(function(e){
        e.preventDefault();
        currentId = $(this).attr("data-id");
        $("#popup-menu").popup("open", {transition:"slideup"} );
    });
});

popupbeforeposition事件中的

第三构建您的网址并将其分配给相应的锚点。

var baseURL = "person.php?id=";
...
$('#popup-menu').on('popupbeforeposition', function(){
    $("#details").attr("href", baseURL + currentId);
});

最后，您正在为 jsFiddle 工作。

jQuery移动弹出动态URL

1 个答案: