如何使用jQuery顯示JSON數據？

Question

我想在JSON上顯示一些關於Click的數據。現在我使用不同的功能爲每個按鈕，但現在只有3所以這是現在

HTML

<div class="map"> 
     <div class="bullets"> 
      <div class="pin" id="pin3" name="ct3" type="" value="" onclick="ct3"></div> 
      <div class="pin" id="pin2" name="ct2" type="" value="" onclick="ct2"></div> 
      <div class="pin" id="pin1" name="ct1" type="" value="" onclick="ct1"></div> 
     </div> 
    </div> 
    <div class="content"> 
     <img class="cover" src = "" id = "img" /> 
     <div class="title"> 
      <p id="header"></p> 
     </div> 
     <div class="copy"> 
      <p id="description"></p> 
     </div> 

    </div> 

什麼是工作的jQuery

function ct1(elem) 
     { 
      document.getElementById("img").src = "images/london.jpg"; 
      $('#header').text('London'); 
      $('#description').text('London is the capital and most populous city of England and the United Kingdom. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.'); 
      $(".pin").removeClass('active'); 
      $('[name="ct1"]').addClass('active'); 
     } 

所以這種方式是否工作正常，但而不是爲每個按鈕有多個功能我已經創建了一些數組，但我不知道如何調用它們onClick

jQuery

function refreshViewWithData(data) 
     { 
      var data = $.parseJSON(json_string); 
      var img = '[{img: "images/london.jpg"}, 
         {img: "images/manchester.jpg"}, 
         {img: "images/newcastle.jpg"}]', 
      var location = '[{"location":"London"},{"location":"Manchester"},{"location":"Newcastle upon Tynes"}]', 
      var description = '[{"description":"London is the capital and most populous city of England and the United Kingdom. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium."}, 
       {"description":"Manchester is a city in Greater Manchester, England, with a population of 514,417 in 2013. Located in the United Kingdoms second most populous urban area, which has a population of 2.55 million, ..."}, 
       {"description":"Newcastle upon Tyne, commonly known as Newcastle, is a city in the metropolitan county of Tyne and Wear in North East England. It is situated on the north western bank of the River Tynes estuary and centred 8.5 mi from the North Sea"}]' 
      data = $.parseJSON(img); 
      data = $.parseJSON(location); 
      data = $.parseJSON(description); 
      document.getElementById("img").src = "(data["img"])"; 
      $('#header').text(data["location"]); 
      $('#description').text(data["description"]); 
      $(".pin").removeClass('active'); 
      $('[name="ct1"]', '[name="ct2"]', '[name="ct3"]').addClass('active'); 
     } 

Answer 1

DONE

<div class="map"> 
     <div class="bullets"> 
      <div class="pin" id="pin3" name="ct3" type="" value="" onclick="ct(3)"></div> 
      <div class="pin" id="pin2" name="ct2" type="" value="" onclick="ct(2)"></div> 
      <div class="pin" id="pin1" name="ct1" type="" value="" onclick="ct(1)"></div> 
     </div> 
    </div> 
    <div class="content"> 
     <img class="cover" src = "" id = "img" /> 
     <div class="title"> 
      <p id="header"></p> 
     </div> 
     <div class="copy"> 
      <p id="description"></p> 
     </div> 

    </div> 

    <script type = "text/javascript"> 
     var data = [ 
     { 
      "image":"images/london.jpg", 
      "title":"London", 
      "desc":"London is the capital and most populous city of England and the United Kingdom. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium." 
     }, 
     { 
      "image":"images/manchester.jpg", 
      "title":"Manchester", 
      "desc":"Manchester is a city in Greater Manchester, England, with a population of 514,417 in 2013. Located in the United Kingdoms second most populous urban area, which has a population of 2.55 million, ..." 
     }, 
     { 
      "image":"images/newcastle.jpg", 
      "title":"Newcastle upon Tyne", 
      "desc":"Newcastle upon Tyne, commonly known as Newcastle, is a city in the metropolitan county of Tyne and Wear in North East England. It is situated on the north western bank of the River Tynes estuary and centred 8.5 mi from the North Sea" 
     } 
     ];   
     function ct(index){ 
      document.getElementById("img").src = data[index-1].image; 
      $('#header').text(data[index].title); 
      $('#description').text(data[index].desc); 
      $(".pin").removeClass('active'); 
      $('[name="ct"'+index+']').addClass('active'); 
     } 
    </script>