更改视图 JQuery 移动设备

Question

我只是想获取 $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 的 api。gov/api/blog。json

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

Answer 1

我已将您的代码修改为一个可行的解决方案：https://jsfiddle.net/ss77uvsp/3/

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

对于"hcabecera"页面，你需要想办法link每个标题到对应的文字。我建议一次性添加和隐藏所有内容，然后根据标识标签显示请求内容。

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

更改视图 JQuery 移动设备

Change view JQuery mobile

jquery

listview

jquery-mobile