如何將json文件調用爲html

Question

我有json文件，我想從json文件調用圖像和標題。要求是當我點擊圖像1，然後第一個圖像和標題應附加在div 1，當我點擊其他鏈接時，它應該附加適當的圖像。我的JSON文件包含

[ 
    { 
     "image" : "images/test1.png", 
     "heading" : "Careers" 
    }, 
    { 
     "image" : "images/item-2.png", 
     "heading" : "Contact Us" 
    }, 
    { 
     "image" : "images/item-3.png", 
     "heading" : "About Us" 
    } 
] 

我的代碼

$(document).ready(function() { 
    $("a").click(function() { 
     var txt= $(this).text() 
     $.getJSON("myson.js",function(result) { 
      $.each(result, function(i, field) { 
       if(txt.indexOf('1')>-1) { 

       } 

       else if(txt.indexOf('2')>-1) { 

       } 
       else { 

       } 

      }); 
     }); 
    }); 
}); 

的Html

<a href='#'>Image 1</a> 
<a href='#'>Image 2</a> 
<a href='#'>Image 3</a> 

<div style="border:solid 1px #000; width:200px; height:200px"> 
    <div id='heading'></div> 
    <div id='image'></div> 
</div> 

Answer 1

首先，你不希望你點擊圖像每次加載JSON文件。您想在開始時加載一次JSON文件並將信息作爲變量對象存儲。

然後，當您單擊圖像時，您只需從變量對象中獲取信息並將信息放入「標題」和「圖像」div中即可。

此外，你應該給你的標籤某種價值屬性（如一個ID或只是做一個像值），因此，在您決定要切換以後的事，你別事件不必重新編寫/重新排序你的json文件。

對於下面的代碼的緣故，改變你的3個標籤，看起來像這樣：

<a val='0' href='#'>Image 1</a> 
<a val='1' href='#'>Image 2</a> 
<a val='2' href='#'>Image 3</a> 

JS：

$().ready(
    function(){ 
     var dataSet; 
     $.getJSON("myson.js",function(d){}).success(processData); 

     function processData(ds){ 
      dataSet = ds; 
     } 

     $("a").click(function(){ 
      $("#heading").empty().html(dataSet[Number($(this).attr('val'))].heading); 
      $("#image").empty().html("<img src='" + dataSet[Number($(this).attr('val'))].image + "' />"); 
     } 
    } 
); 

給一個嘗試