javascript - 如何使用 jQuery 显示 JSON 数据？

Question

我想显示一些来自 JSON 的 onClick 数据。现在我为每个按钮使用不同的功能，但现在只有 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

完成

<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>