javascript - 如何在 jQuery 中传递动态值

Question

我真的不知道如何正确地为这些问题命名，对于可能造成的混淆，我们深表歉意。这是我的问题。我有一个包含两个数组的 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 数组的名称)放在我放置这些哈希值的位置。

Answer 1

您必须使用[] 来传递动态值

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

这将只获取 list 1 值