0

我有 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>
4

1 回答 1

0

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

$(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
});
于 2013-10-02T13:06:27.797 回答