Question

我有XML服务，我已经解析并得到了服务响应。接下来，我从Jquery Mobile获取了响应并添加到Listview。我已经成功填充列表视图，其中包含一些详细信息和一个示例图像。我的问题是，当我点击列表项时，我必须显示有关列表项的数据。假设我已经点击了第二个列表项，那么第二个列表项应该显示在新页面中。我试过的是。

  $(document).ready(function() {
      $.ajax({
          type: "GET",
          url: "http://api.geonames.org/children?geonameId=3175395&username=tutorialsgeek",
          dataType: "xml",
          success: xmlParser,
          error: function(errorThrown) {
              alert("An error occurred!" + errorThrown);
          }
      });
  });

  function xmlParser(data) {
      xml = data;
      var imageLink = "https://hca.twimg.com/a/1380571156/gazebo/img/bg-hero.jpg";
      $('#load').fadeOut();
      $(xml).find('geonames geoname').each(function(index, val) {
          var output = "";
          var locationName = $(this).find("toponymName").text();
          var name = $(this).find("name").text();
          output += '<li>';
          output += '<a href="#blogpost">';
          output += '<h3>';
          output += locationName;
          output += '</h3>';
          output += '<img src="' + imageLink + '" alt="image" />';
          output += '<p>';
          output += 'name :' + name;
          output += '</p></a>';
          output += '</li>';
          $("#list").append(output);
           $('#list').listview('refresh');
      });     
  }

我的html页面是..

<div data-role="page" id="listPage">
    <div data-role="header">
        <h1>XMl Parsing</h1>
    </div><!--End of header-->

    <div data-role="content">
        <div id="result">
            <ul data-filter="true" data-role="listview" data-theme="c" id=
            "list">
                <li id="load">Loading Data...</li>
            </ul>
        </div>
    </div><!--end of content-->
</div>

<div data-role="page" id="blogpost">
    <div data-role="header">
        <h1>XMl Parsing</h1>
    </div><!--End of header-->

    <div data-role="content">
        <div id="result"></div>
    </div><!--end of content-->
</div>

Answer 1

您可以将事件附加到列表中的所有超链接，并处理代码以在那里显示更多信息。

$(document).ready(function() {
    $('#list').on('click', 'a', function() {
        //display more information
    });
});

要传递 geonameid ，您可以在将链接添加到DOM之前向链接添加数据属性

var geonameId = $(this).find("geonameId").text();
output += '<a href="#blogpost" data-geonameid="'+geonameId+'">';

然后，在事件处理程序中，您可以在触发事件时轻松地检索它

$('#list').on('click', 'a', function() {
    var geonameId = $(this).data('geonameid');
    //display more information using your new, shiny geonameId
});

如何在新页面Jquery中显示Listview内容

1 个答案: