我正在尝试附加 JQM "pages" 以使我能够在选择列表项时显示图像

Question

我正在尝试附加 JQM "pages" 以使我能够在选择列表项时显示图像。到目前为止，我可以创建 "data-role page" 和 "data-role header"，但是当我尝试创建 "data-role content" 时，它不起作用。当我在控制台上显示 "name" 时，它出现在引号中，我想知道这是否会导致问题，因为我正在尝试使用 "name" id 来显示我想要插入的位置。

hmtl

<body>
    <div data-role="page" id="home">
        <div data-role="content">
          <div class="content-primary">
            <div data-demo-html="true">
              <ul id="myList" data-role="listview">
                <li></li>
              </ul>
            </div>
          </div>
        </div>
    </div>
  </body>

xml

<LolCatz>
<kitteh>
    <id>1</id>
    <name>Ceiling Cat</name>
    <url>http://icanhas.cheezburger.com/tag/ceiling-cat</url>
</kitteh>

<kitteh>
    <id>2</id>
    <name>Basement Cat</name>
    <url>http://i191.photobucket.com/albums/z37/beamerpi/TeeSting_s_Stuff/basement-cat-eats-souls.jpg</url>
</kitteh>


<kitteh>
    <id>3</id>
    <name>Monorail Cat</name>
    <url>http://i178.photobucket.com/albums/w263/Laudon1965/MonorailCat.jpg</url>
</kitteh>

<kitteh>
    <id>4</id>
    <name>Laser Kitteh</name>
    <url>http://31.media.tumblr.com/II7NpYhKVobop9l1WLTAmnGMo1_500.jpg</url>
</kitteh>
</LolCatz>

js

函数xml解析器（数据）{ xml = 数据；

$(xml).find("kitteh").each(function() {
    kitteh = $(this);
    var name = $(kitteh).find("name").text();
    var src = $(kitteh).find("url").text();
    var id = $(kitteh).find("id").text();
    $("#myList").append('<li><a href="#' + id + '">' + name + '</a></li>');

// Append new "pages" after "home" page
$("#home").append(
    '<div data-role="page" id="' + id + '">');
$("#"+id).append(
    '<div data-role="header" id="' + name + '">' + name);
$("#"+name).append (
    '<div data-role="content" id="img_' + name +    '" ><a href="' + src + '</a>');
    console.log (name);     
});

}

检查员：

控制台：

Answer 1

您的代码中存在一些问题。

您正在从中间有空格的字符串创建 DOM 个元素 ID。
在您正在创建的页面 HTML 中，您没有正确关闭标签
您需要将新页面附加到 BODY 而不是页面
您需要在添加列表项后刷新列表视图小部件。

尝试：

$xml.find("kitteh").each(function() {
    kitteh = $(this);
    var name = $(kitteh).find("name").text();
    var src = $(kitteh).find("url").text();
    var id = $(kitteh).find("id").text();
    $("#myList").append('<li><a href="#page' + id + '">' + name + '</a></li>').listview("refresh");

    // Append new "pages" after "home" page
    var pHTML = '<div data-role="page" id="page' + id + '">';
    pHTML += '<div data-role="header" id="head' + id + '"><h1>' + name + '</h1><a data-rel="back">Back</a></div>';
    pHTML += '<div role="main" class="ui-content" id="img_' + id + '"><a href="' + src + '" >' + name + '</a></div>';
    pHTML += '</div>';
    console.log(pHTML);
    $("body").append(pHTML)
});

Working DEMO

为了更好的性能，在字符串中创建列表和页面 html，然后在迭代 XML:

后将它们附加到 DOM 一次

var listHTML = '';
var pagesHTML = '';

$xml.find("kitteh").each(function() {
    kitteh = $(this);
    var name = $(kitteh).find("name").text();
    var src = $(kitteh).find("url").text();
    var id = $(kitteh).find("id").text();        
    listHTML += '<li><a href="#page' + id + '">' + name + '</a></li>';

    // Append new "pages" after "home" page
    var pHTML = '<div data-role="page" id="page' + id + '">';
    pHTML += '<div data-role="header" id="head' + id + '"><h1>' + name + '</h1><a data-rel="back">Back</a></div>';
    pHTML += '<div role="main" class="ui-content" id="img_' + id + '"><a href="' + src + '" >' + name + '</a></div>';
    pHTML += '</div>';

    pagesHTML += pHTML;
});

$("#myList").empty().append(listHTML).listview("refresh");
$("body").append(pagesHTML);

DEMO

我正在尝试附加 JQM "pages" 以使我能够在选择列表项时显示图像

I am trying to append JQM "pages" to enable me to display an image when the list items are selected

html

xml

jquery

jquery-mobile