Question

我使用$ .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"
            }
         ]

Answer 1

如果没有将它括在引号中，则无法命名对象文字属性class，因为class是JS中的保留字。变化：

class : mVal.attributes.class

到

'class' : mVal.attributes.class

其他浏览器允许它（虽然它总是让我感到困惑，为什么他们这样做 - 如果它是变量，而不是属性，毕竟它会出错）。

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

Answer 2

假设您的函数甚至被调用（并且它很可能不会被调用）你需要将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函数根本无法工作是不可想象的。

jquery append - 方法问题 - 如何解决？

2 个答案: