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');
        }

所以这种方式工作正常但是我为每个按钮设置了多个功能我创建了一些阵列，但我不知道如何调用它们点击

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>

如何用jQuery显示JSON数据？

1 个答案: