通過JavaScript在jQuery Mobile中打印Json文件

Question

基本上，我已經成功用html中的js函數打印了一個json文件。 從那以后，我切換到了jquery mobile，並嘗試修改我的函數以使其與jquery mobile語法匹配。 我已經手動添加了應該打印出的功能，它可以正確顯示，因此該功能存在問題。 我試圖在ui-grid-d中進行打印，並通過每個塊循環遍歷數組，以保持正確的語法

JS功能：

<script type="text/javascript">
var grid= new Array();
grid[0]= "<div class='ui-block-a'>";
grid[1]= "<div class='ui-block-b'>";
grid[2]= "<div class='ui-block-c'>";
grid[3]= "<div class='ui-block-d'>";
var j=0;


$(function (){

  var imp = "Json/contents.json"

  $.getJSON(imp, function(data) {
    var toc="";
    var pos=grid[j];
    $.each(data.tcontent, function(index, item) {
      toc += pos + item.url + '<div class="grid">' + "<p class='gridtext'>" + item.Chapter + ":" + item.Name  + "</p>" +  "</div>" + "</a>" + "</div>"
    });

 //incriment j
 j++;

 //if j is out of bounds return j to 0
 if(j==4){
  j=0;
}
$(toc).appendTo(".ui-grid-d");
 //alert(toc)
 });
});
</script>

Json File（忘記background屬性）：

{
 "tcontent": [{
"Chapter": "1",
"Name": "General Principles of Antibiotic Perscribing",
"url":"<a href='general_principles.html'>",
"Background":"yellow"
}, {
"Chapter": "2",
"Name": "Note on meticillin resistant SA",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "3",
"Name": "Empirical Therapy Guidelines:",
"url": "<a href='empirical.html'>",
"Background":"background-color:red"
}, {
"Chapter": "4",
"Name": "Treatment of Malaria",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "5",
"Name": "Antibiotic Prophylaxis:",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "6",
"Name": "Aminoglycoside and Glycopeptide dosing and monitoring:",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "7",
"Name": "Splenectomy: vaccination and antibiotic prophylaxis",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "8",
"Name": "Restricted Antimicrobials",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "9",
"Name": "Topical Antibiotics",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "10",
"Name": "Antimicrobials and Renal Failure",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "11",
"Name": "Antimicrobials and Hepatic Disease",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "12",
"Name": "Administration of IV Antimicrobials",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "13",
"Name": "Penicillin allergy & other beta-lactam containing antibiotics",
"url":"<a>",
"Background":"background-color:red"
}]
}

相關HTML：

     <body>
          <div data-role="page" data-theme="a" id="Page1">

            <div data-role="header" data-theme="c">
              <a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back"> Back </a>
                <a href="info.html" data-role="button" class="ui-btn-right" data-transition="flip" data-icon="info"> Info </a>
                <h2>Main Menu</h2>
            </div>

            <div data-role="content" data-theme="c" id="Page1_Content">

            <div class="ui-grid-d">



            </div>

            <div data-role="footer" data-theme="c">
                <h2>(c) Darragh O'Connor </h2>
            </div>


        </div>



</body>

如果有人能看到問題，我將不勝感激。 我已經動腦了幾個小時。 謝謝

Answer 1

這是一個演示

您需要在$.each()遞增j ，並且如果j> 3，也將其設置為0。您在文本中還缺少<a>標記或多余</a> 。 您的變量pos也永遠不會更改，因為它位於each（）循環之外。 對於4列，網格類應為ui-grid-c 。

$(document).on("pageinit", "#Page1", function(){

    var toc= '';
    $.each(json.tcontent, function(index, item) {
        if (j > 3) { j = 0; }
        toc += grid[j] + item.url + '<div class="grid">' + "<a><p class='gridtext'>" + item.Chapter + ":" + item.Name  + "</p>" +  "</div>" + "</a>" + "</div>"
        j++;
    });

    $(toc).appendTo(".ui-grid-c");

});

通過JavaScript在jQuery Mobile中打印Json文件

問題描述

1 個解決方案

解決方案1
0 已采納 2014-02-10 20:48:43

通過JavaScript在jQuery Mobile中打印Json文件

問題描述

1 個解決方案

解決方案1 0 已采納 2014-02-10 20:48:43

解決方案1
0 已采納 2014-02-10 20:48:43