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

尝试一下

如何将json文件调用为html

1 个答案: