Listview 中的 jQueryMobile 弹出窗口有问题

Question

所以我正在尝试制作一个缩略图列表视图，当用户单击一个按钮时，他们会在每个按钮中获得不同的弹出窗口，但我的问题是每个按钮显示的信息与列表中每个按钮的第一个弹出窗口中的信息相同。我做错了什么？

<div data-role="listview">
  <li>
                <a href="#codeSample" data-rel="popup" data-transition="slide" data-position-to="codeSample">
                <h1>Song1</h1>
                <img src="image" />
                <p>Artist1</p></a>

<div data-role="popup" id="codeSample">

  <p>Artist1 Bio</p>
</div>

  </li>
    <li>
                <a href="#codeSample" data-rel="popup" data-transition="slide" data-position-to="codeSample">
                <h1>Song2</h1>
                <img src="image" />
                <p>Artist2</p></a>

<div data-role="popup" id="codeSample">

  <p>Artist2 Bio</p>
</div>

  </li>

</div>

Answer 1

您需要为弹出窗口指定不同的 ID。

你有：

<div data-role="popup" id="codeSample">

对于两个弹出窗口。

给他们一个不同的 id 并适当地调用所需的 id。