0

我正在使用 $.map 方法从 Json 获取数据。并且根据数据的类型，我正在制作元素并将数据说明的内容附加到容器中。它适用于所有浏览器，包括 ie9。但少于即 9，我什么也没得到。

我怎样才能解决这个问题？

我的代码：

var processModules = function (mData) {
    var lMData = mData;
    $.map(lMData, function (mVal,i) {
            $(mVal.type === 'form' ?  '<form></form>' : '<div></div>',{
                id : mVal.attributes.id,
                'class' : mVal.attributes['class']
            })
            .appendTo(mVal.container);    // not appending in less than ie9.  
    } )
}

$(document).ready(function () {
   $.getJSON('json.txt', function (data) {
        if($(data['modules'])){
            processModules($(data['modules']));
        }
   })   
});

我的 json ：

 "modules":[
      {
         "type":"navigation",
         "container":"#header",
         "title":"Top Navigation",
         "attributes":{
            "class":"topNavigation",
            "id":"topNavigation"
         }
      },
      {
         "type":"content",
         "title":"Hi Welcome to mobile development",
         "subtitle":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
         "container":"#maincontent",
         "attributes":{
            "class":"topContent"
         }
      },
      {
         "type":"form",
         "title":"Registration Form",
         "action":"submit.aspx",
         "name":"registrationform",
         "container":"#maincontent",
         "attributes":{
            "class":"registrationform"
         },
         "fields":[
            {
               "id":"firstname",
               "label":"First Name",
               "name":"fname",
               "type":"text",
               "value":""
            },
            {
               "id":"email",
               "label":"Email",
               "name":"email",
               "type":"text",
               "value":""
            },
            {
               "id":"countries",
               "label":"Country",
               "name":"countries",
               "type":"select",
               "options":[
                  {
                     "value":"",
                     "text":"Select Country"
                  },
                  {
                     "value":"in",
                     "text":"India",
                      "selected":"true"
                  },
                  {
                     "value":"us",
                     "text":"United Stated"

                  },
                  {
                     "value":"uk",
                     "text":"United Kingdom"
                  },
                  {
                     "value":"cn",
                     "text":"Canada"
                  }
               ]
            },
            {
               "id":"submit",
               "name":"submit",
               "type":"submit",
               "value":"Submit"
            }
         ]
4

2 回答 2

-1

您不能class在不将其括在引号中的情况下命名对象文字属性，因为class它是 JS 中的保留字。改变：

class : mVal.attributes.class

至

'class' : mVal.attributes.class

其他浏览器允许它（尽管我总是有点困惑他们为什么这样做 - 如果它是一个变量，而不是一个属性，毕竟它会出错）。

通常，避免在您自己的定义中使用保留字。

于 2012-08-13T10:59:50.083 回答
-1

假设您的函数甚至被调用（而且很可能不是），您需要将class键括在引号中，以确保它不会达到保留的关键字冲突规则。

您也需要为值执行此操作：

'class': mVal.attributes['class']

使用[]语法，因为myobject.'mykey'也不是合法的语法。

您的代码中还有一个无关紧要的 jQuery 包装器：

if ($(data['modules'])) { ... }

这是错误的，因为 modules 变量是一个对象数组，而不是 DOM 元素。

我会把整个事情写成：

var processModules = function(data) {
    var lMData = data.modules || [];  // default to empty array
    $.map(lMData, function (mVal,i) {
        $(mVal.type === 'form' ?  '<form>' : '<div>', mVal.attributes);
        .appendTo(mVal.container);
    })
}

$(document).ready(function () {
   $.getJSON('json.txt', processModules);
});

请注意，我没有创建新的属性对象，因为您的 JSON 中的属性对象已经可以直接提供给$().

如果毕竟它在 IE9 中仍然不起作用，那么您需要做更多的调试并在这里让我们满意，.appendTo调用确实是使用适当的参数调用的。一个核心 jQuery 函数根本无法工作是不可想象的。

于 2012-08-13T11:01:24.063 回答