在 jQuery Mobile 中激活弹出窗口

Question

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

<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