-1

我有 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>
4

1 回答 1

1

首先，您不希望每次单击图像时都加载 JSON 文件。您希望在开始时加载一次 JSON 文件并将信息存储为变量对象。

然后，当您单击图像时，您只需从变量对象中获取信息并将信息放入“标题”和“图像”div。

此外，您应该为您的标签提供某种值属性（例如id或只是组成一个类似value），以便在您决定将来要切换某些东西并且不必重新编写 /重新排序您的 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 + "' />");
        }
    }
);

试试看

于 2013-04-02T19:25:56.757 回答