jquery append - 方法問題 - 如何解決它？

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'])) { ... } 

這是錯誤的，因爲模塊變量是對象的數組，而不是DOM元素。

我只是寫了整個事情是：我還沒有建立一個新的屬性對象，因爲一個在你的JSON已經是合法的供應直接到$()

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); 
}); 

注意。

如果畢竟，它仍然不IE9工作，那麼你需要做更多的調試和這裏滿足我們的.appendTo呼叫真的獲取調用適當的參數。核心jQuery函數根本無法工作是不可想象的。