Question

我正在尝试附加JQM“页面”，以便在选择列表项时显示图像。到目前为止，我可以创建“数据角色页面”和“数据角色标题”，但是当我尝试创建“数据角色内容”时，它不起作用。当我向控制台显示“名称”时，它显示在引号中，我想知道是否会导致问题，因为我正在尝试使用“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

function xmlParser（data）{ xml = data;

$(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);     
});

}

检查员：

inspector

控制台：

console

Answer 1

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

您正在从中间有空格的字符串创建DOM元素ID。
在您正在创建的页面HTML中，您未正确关闭代码
您需要将新页面附加到BODY而不是页面
添加listitems后需要刷新listview小部件。

尝试：

$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)
});

正在使用 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＆＃34;页面＆＃34;使我能够在选择列表项时显示图像

1 个答案: