Question

我在jQuery Mobile应用程序中有一堆格式化为listview小部件的会议会话信息。目前我在每个li中都有一个包含更长会话描述的段落，并且我将其设置为display：none。我把整个李包裹在一个目前无处可去的链接中。我正在寻找有关如何在有人点击li时以编程方式打开隐藏段落作为弹出窗口小部件的帮助。通常我认为弹出激活链接与div的唯一ID相关，我的许多会话描述当前没有。我的内容是在href元素中，而不是与它分开。是否有人建议采用明智的方法来弹出这个隐藏的段落？我希望避免为每个描述创建单独的ID，甚至可能避免必须将段落包装在弹出窗口的特殊div中。这是我目前的李代码......

<li class="preconference_1-day"><a href="#">
<h3>Conflict Management and Peacebuilding as a Classroom Management Tool</h3>
<p> Presented by <strong>Some University</strong></p>
<p>Location: McPherson Lab, Room 1035</p>
<p class="ui-li-aside"><strong>9:00 AM</strong></p>
<p style="display:none">Description: Participants will be introduced to a...</p></a>
</li>

我正在使用jquery-2.2.4和jquery.mobile-1.4.5

Answer 1

一种简单的方法是使用data属性来存储额外的信息

例如 <li data-extra="Description: The second set..." class="preconference_1-day">

<强>代码

//The list item click function
$("#listview > li").on("click", function() {
//Get whats in the data attribute from item clicked
var extra = $(this).attr("data-extra");
//Empty whats inside the popup, append data, and open the popup
$("#mypopup").empty().append("<p>"+extra+"</p>").popup("open");
});

The Popup Widget and all its options

About the data-* attribute

<强> Demo

在jQuery Mobile中激活Popup

1 个答案: