Question

我有一个JSON文件，我想从中创建一个带有JSON值的动态html元素。以下是JSON文件：

{
    "india": [
        {
            "position": "left",
            "imgurl":"3.jpg"
        },

        {
            "position": "right",
            "imgurl":"2.jpg"
        },

        {
            "position": "left",
            "imgurl":"3.jpg"
        },

        {
            "position": "right",
            "imgurl":"2.jpg"
        }
    ],

    "aus": [
        {
            "position": "left",
            "imgurl":"4.jpg"
        },

        {
            "position": "right",
            "imgurl":"2.jpg"
        },

        {
            "position": "left",
            "imgurl":"3.jpg"
        },

        {
            "position": "right",
            "imgurl":"2.jpg"
        }
    ]
}

以下是包含Javascript代码的HTML文件：

<html>
<head>
  <title>The jQuery Example</title>
  <script type = "text/javascript" 
  src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <script type = "text/javascript" language = "javascript">
   $(document).ready(function() {

    $("#driver").click(function(event) {

        $.getJSON('list1.json', function(data) {

            $.each(data.india, function (key, val) {

                $('.ms-left').append('<div class="ms-section '+val.position+'" id="left3"><img src="'+val.imgurl+'"></div>');

            });        
        });
    });
});
</script>
</head>      
<body>
  <p>Click on the button to load result.html file:</p>

  <div id = "stage" style = "background-color:#cc0;">
   STAGE</div>

<ul id="ul"></ul>
<div class="ms-left"></div>

<input type = "button" id = "driver" value = "india" />

<ul id="menu" class="">
    <li><a href="" data-value="india">India</a></li>
    <li><a href="" data-value="aus">Australia</a></li>
    <li><a href="" data-value="usa">USA</a></li>
</ul>       
</body>
</html>

我想为每个函数提供动态变量，即$.each(data.india) ..我想将印度更改为AUS，USA动态地表示data.india，data.aus等，以便.each创建和根据参数从JSON获取值。请帮忙。

如何将动态参数传递给.each循环，以帮助我根据JSON中定义的国家/地区获取数据？目前，我可以静态更改data.india，data.aus以获取值，但我希望它是动态完成的。

我在代码中有上面的li结构。我的目的是当我点击印度的链接时，它会点击印度值的JSON文件并获取印度的数据，就像我点击AUS链接一样，它将从JSON获得AUS的数据。

Answer 1

@makemelive一些建议：

将JS代码放在<body>代码的末尾，而不是<head>内。
使用一致的缩进，标签或空格，因为它们是通用的，所以更喜欢空格。

以下是您问题的解决方案：

<html>
<head>
    <title>The jQuery Example</title>
</head>
<body>
    <div id="stage" style="background-color:#cc0;">STAGE</div>
    <div class="ms-left"></div>
    <ul id="menu" class="countries">
        <li><a href="#" data-value="india">India</a></li>
        <li><a href="#" data-value="aus">Australia</a></li>
        <li><a href="#" data-value="usa">USA</a></li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        var json = {
            "india": [
                {
                    "position": "left",
                    "imgurl": "3.jpg"
                },
                {
                    "position": "right",
                    "imgurl": "2.jpg"
                },
                {
                    "position": "left",
                    "imgurl": "3.jpg"
                },
                {
                    "position": "right",
                    "imgurl": "2.jpg"
                }
            ],
            "aus": [
                {
                    "position": "left",
                    "imgurl": "4.jpg"
                },
                {
                    "position": "right",
                    "imgurl": "2.jpg"
                },
                {
                    "position": "left",
                    "imgurl": "3.jpg"
                },
                {
                    "position": "right",
                    "imgurl": "2.jpg"
                }
            ]
        };
    </script>
    <script>
        var populate = function (country) {
            $('.ms-left').empty();
            $.each(json[country], function (key, value) {
                var _div = $('<div>')
                    .addClass('ms-section')
                    .addClass(value.position)
                    .append($('<img>').attr('src', value.imgurl));

                $('.ms-left').append(_div);
            });
        };

        $(document).ready(function() {

            /**
             * Get your JSON here and store it in a local variable,
             * loading the file for each case is not a good practice
             * if the file is always the same.
             */

            $('.countries a').each(function() {
                $(this).on('click', populate.bind(this, $(this).data('value')));
            });
        });
    </script>
</body>
</html>

使用get json方法从json动态获取数据并循环使用值

1 个答案: