更改视图 JQuery 移动答案

【问题标题】：Change view JQuery mobile更改视图 JQuery 移动
【发布时间】：2016-03-22 12:06:19
【问题描述】：

我只是想获取 $each 获得的数组的值并更改视图。另一个视图必须包含我在另一个视图上选择的文本并打印它。我想我需要比较这些值，但我不知道如何。

标题列表视图的 HTML

<div class="example-wrapper" data-iscroll>
  <ul data-role="listview"  id="listados" > 
  </ul>
</div>

内容视图的 HTML

<div data-role="page" id="hcabecera">
  <div id="noticia">
  </div>
</div>

我正在获取 www.healthcare.gov/api/blog.json 的 api

$(document).on('pageinit', '#home', function() {
  $.getJSON('https://www.healthcare.gov/api/blog.json', function(datos) {
    $.each(datos.blog, function(i, value) {
      if (value.lang == 'es') {
        $('#listados').append('<li><a>' + value.title + '</li></a>');
        $('#listados').listview('refresh');
      }
    });
    $("#listados li").on('click', function() {
      $.mobile.changePage("#hcabecera", {
        transition: "slide",
        changeHash: false
      });
      $("#noticia").append(datos.blog.content);
    });
  });
});

【问题讨论】：

标签： jquery listview jquery-mobile

【解决方案1】：

我已将您的代码改写为有效的解决方案：https://jsfiddle.net/ss77uvsp/3/

您需要以稍微不同的方式进行迭代，以收集您需要的信息。然后，在每次迭代之后，评估结果并附加到列表中。这至少是一种方法。

对于“hcabecera”页面，您需要找到一种方法将每个标题链接到相应的文本。建议一次性追加隐藏所有内容，然后根据标识标签显示请求内容。

var title = "", lang = "", content = "", id = 1;

$.getJSON('https://www.healthcare.gov/api/blog.json', function(datos) {
  $.each(datos.blog, function() {
    $.each(this, function(i, value) {
      //The title appears before the language tag, so we need to save it temporarily
      if(i == "title")
        title = value;
      //Language
      if(i == "lang")
        lang = value;
      //Content
      if(i == "content")
        content = value;
    });
    //Check that the language is correct
    if(lang == "en"){
      //Append title to list
      $('#listados').append('<li data-no="'+id+'"><a>' + title + '</li></a>');
      //Append content to page hcabecera
      $("#noticia").append('<div id="item-'+id+'" class="items">'+content+'</div>');
      id++;
    }
  });
  //Refresh list
  $('#listados').listview('refresh');

  //List item click event
  $("#listados li").on('click', function() {
    //Get div ID
    var no = $(this).attr("data-no");
    $(".items").hide();
    $("#item-"+no).show();
    $.mobile.changePage("#hcabecera", {
      transition: "slide",
      changeHash: false
    });
  });
});

【讨论】：