javascript - How to show JSON data with jQuery? -
i want show data onclick json. using different functions each button 3. working now
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 capital , populous city of england , united kingdom. standing on river thames, london has been major settlement 2 millennia, history going founding romans, named londinium.'); $(".pin").removeclass('active'); $('[name="ct1"]').addclass('active'); } so way working instead have multiple functions each button i've created arrays don't know how call them 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 capital , populous city of england , united kingdom. standing on river thames, london has been major settlement 2 millennia, history going founding romans, named londinium."}, {"description":"manchester city in greater manchester, england, population of 514,417 in 2013. located in united kingdoms second populous urban area, has population of 2.55 million, ..."}, {"description":"newcastle upon tyne, commonly known newcastle, city in metropolitan county of tyne , wear in north east england. situated on north western bank of river tynes estuary , centred 8.5 mi 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'); }
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 capital , populous city of england , united kingdom. standing on river thames, london has been major settlement 2 millennia, history going founding romans, named londinium." }, { "image":"images/manchester.jpg", "title":"manchester", "desc":"manchester city in greater manchester, england, population of 514,417 in 2013. located in united kingdoms second populous urban area, has population of 2.55 million, ..." }, { "image":"images/newcastle.jpg", "title":"newcastle upon tyne", "desc":"newcastle upon tyne, commonly known newcastle, city in metropolitan county of tyne , wear in north east england. situated on north western bank of river tynes estuary , centred 8.5 mi 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> 
Comments
Post a Comment