如何在jQuery中传递动态值

时间:2015-08-18 10:57:16

标签: javascript jquery json

我真的不知道如何正确地标题这个问题,对不起可能的混淆感到抱歉。这是我的问题。我有一个带有两个数组的JSON文件。

{
    "list 1": 
    [
        {
            "name": "label1",
            "imgPath": "images/list1img1.png"
        },

        {
            "name": "label2",
            "imgPath": "images/list1img2.png"
        },
    ]

    "list 2": 
    [
        {
            "name": "label1",
            "imgPath": "images/list12img1.png"
        },

        {
            "name": "label2",
            "imgPath": "images/list2img2.png"
        },
    ]
}

我还有一个包含两个文本和一个图像容器的html文件:

<h2>list 1</h2>
<h2>list 2</h2>

<div class="container"></div>

我想单击一个列表并使用Jquery将JSON文件中的图像加载到容器中。我设法创造了一个能够做到这一点的功能,但这就是我被困住的时候。

$document.ready(function () {
    $(h2).click(function(e) {
        loadJson(e);
    }       
});

function loadJson(e) {

        var jsonURL = "images.json";

        var txt = $(e.target).text(); // text from h2 element, it can be list1 or list2

        $.getJSON(jsonURL, function (json)
        {
            var imgList= "";

            $.each(json.#################, function () {
                imgList += '<img src="' + this.imgPath + '"/>';
            });
            $('.container').append(imgList);
        });
    }

代码正在运行,但我想把txt变量(基本上得到JSON数组的名称)放在那些哈希值。

2 个答案:

答案 0 :(得分:2)

您已使用[]传递动态值

 $.each(json[txt], function () {
       imgList += '<img src="' + this.imgPath + '"/>';
 });

这只会获取list 1

答案 1 :(得分:1)

$.getJSON(jsonURL, function (json)
    {
        var imgList= "";
       $.each(json[txt], function () {
            imgList += '<img src="' + this.imgPath + '"/>';
        });
        $('.container').append(imgList);
    });
}

您可以将put txt变量放在[]标记内。希望它能起作用