Question

我正在关注此YouTube视频https://www.youtube.com/watch?v=ZwqTsxyhQAU，并尝试制作一个包含列表视图的简单网页。但是，我已完全按照视频进行操作并使用相同的代码，但是我没有获得与视频相同的列表视图。请有人帮助我;以下是我的截图：

我应该拥有什么：

What I should have

但相反，我得到了这个：

But instead, I am getting this

代码：

<!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>

Answer 1

视频中使用的版本较旧，您使用的是最新版本1.4。图像应该是锚的第一个孩子。

<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中列出视图

1 个答案: