我正在关注这个 youtube 视频 https://www.youtube.com/watch?v=ZwqTsxyhQAU并尝试制作一个带有 ListView 的简单网页。但是，我完全按照视频进行操作并使用了相同的代码，但是我没有得到与视频中相同的 ListView 。请有人帮帮我；以下是我的截图:
我应该拥有的:
但是，我得到的是:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<header data-role="header">
<h1>List App</h1>
</header>
<!--Article, main text for the web page-->
<article data-role="content">
<ul data-role="listview">
<li>
<a href="#test">
<h1>This is a test</h1>
<img src="Images/test.png" alt="Test image" />
<p>This is a image test to see if it works</p>
</a>
</li>
<li>
<a href="#test">
<h1>This is a test 2</h1>
<img src="Images/test.png" alt="Test image" />
<p>This is a image test 2 to see if it works</p>
</a>
</li>
</ul>
</article>
<!--Footer here-->
<footer data-role="footer">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Info</a></li>
</ul>
</nav>
</footer>
</body>
</html>
最佳答案
视频中使用的版本是旧版本，您使用的是最新版本 1.4。图像应该是 anchor 的第一个 child 。
<li>
<a href="#test">
<img src="test.jpg" alt="Welcome to JS Bin">
<h1>This is a test 2</h1>
<p>This is a image test 2 to see if it works</p>
</a>
</li>
关于jquery - jquery 中的 ListView ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28982338/