-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 ファイルを最初に 1 回読み込み、その情報を変数オブジェクトとして保存します。

次に、画像をクリックすると、変数オブジェクトから情報を取得し、その情報を「見出し」と「画像」の 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 + "' />");
        }
    }
);

試してみてください

于 2013-04-02T19:25:56.757 に答える