jquery json用條件生成html按鈕

我的需求是生成json中描述的條件的按鈕。請幫助我，我是新手，我卡住了。問題是我的代碼生成帶有「未定義」文本的按鈕，並且按鈕單擊時沒有任何反應。jquery json用條件生成html按鈕

這裏是我的JSON代碼（它是有效的，由於在http://www.jsoneditoronline.org/檢查結果，但不與下面的HTML代碼工作）：

{ 
     "Caption": "Module caption", 
     "IconsDirectory": "C://Images/", 
     "Buttons": [ 
      { 
       "Conditions": [ 
        { 
         "ConditionText": "1 == 1", 
         "ButtonText": "Text1", 
         "Visible": true, 
         "Colors": { 
          "FontColor": "#FFFFFF", 
          "BGColor": "#669933" 
         }, 
         "BButtonText": { 
          "TText": "Textt1" 
          }, 
         "Size": { 
          "Width": 200, 
          "Height": 50 
         }, 
         "Icon": { 
          "FileName": "Smile.png", 
          "Width": 16, 
          "Height": 16 
         }, 
         "Url": { 
          "UrlAddress": "http://www.google.com", 
          "OpenNewWindow": true 
         }, 
         "JavaScriptAction": { 
          "Text": "alert('ok');" 
         } 
        }, 
        { 
         "ConditionText": "2 == 2", 
         "ButtonText": "Text2", 
         "Visible": true, 
         "Colors": { 
          "FontColor": "#0FFFFF", 
          "BGColor": "#FF9966" 
         }, 
         "BButtonText": { 
          "TText": "Textt1" 
          }, 
         "Size": { 
          "Width": 200, 
          "Height": 50 
         }, 
         "Icon": { 
          "FileName": "Smile.png", 
          "Width": 16, 
          "Height": 16 
         }, 
         "Url": { 
          "UrlAddress": "http://www.google.com", 
          "OpenNewWindow": true 
         }, 
         "JavaScriptAction": { 
          "Text": "alert('ok');" 
         } 
        } 
       ] 
      } 
     ] 
    }

的html代碼：

<html> 
    <head> 
    <title>SMButtons</title> 
    <script src="jquery/jquery-1.4.2.js"></script> 
    <script type="text/javascript">   
    //When document loaded. 
    $(document).ready(function(){ 
    // Get data from file as JSON 
       $.getJSON('weekendtask.json', function(data) { 
      //var buttons = data.Buttons; 
       //$.each(buttons, function(key, val) 
       //{ 
       //$('<li><input type="button" onClick="'+   val.Conditions[0].JavaScriptAction +'" value="'+ val.Conditions[0].ButtonText +'"/>  </li>').appendTo('#ulObj'); 
       //$('<li><input type="button" value="'+   val.Conditions[1].BButtonText.TText +'"/></li>').appendTo('#ulObj'); 
    var res="" 
    $.each(data.Buttons, function(key, button){ 
     $.each(button.Conditions,function(key,condition){ 
     // console.log(condition) 
      res+="<li>" 
      res+='<input type="button"' + 
       //'" value="'+ '"Ttt"' + 
       '" value="'+ condition.ButtonText + 
       //'" value="'+ data.Buttons.Conditions.ButtonText + 
       '" onclick="' + condition.JavascriptAction + 
       '" style="background-color:'+condition.Colors.BGColor+'   color:'+condition.Colors.FontColor+ 
       '"/>' 
      res+="<\/li><\/br><\/br>test<\/br>" 
     }) 
    }) 
    $(res).appendTo('#ulObj') 

       //}); 
     });    
     }); 

    window.onload = function(){ alert("welcome"); } 

     </script> 
    </head> 
    <body bgcolor="silver"> 
    <br> 
    <br> 
    <div> 
    <ul id='ulObj'> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    </ul> 
    </div> 
    </body> 
    </html>

來源

2012-11-18 Marchello

onClick處理程序應是condition.JavaScriptAction.Text。休息一切工作正常。

var res = "" 
    $.each(data.Buttons, function(key, button) { 
     $.each(button.Conditions, function(key, condition) { 
      res += "<li>" 
      res += '<input type="button"' + '" value="' + condition.ButtonText + '" onclick="' + condition.JavaScriptAction.Text + '" style="background-color:' + condition.Colors.BGColor + '   color:' + condition.Colors.FontColor + '"/>' 
      res += "<\/li><\/br><\/br>test<\/br>" 
     }) 
    }) 
    $(res).appendTo('#ulObj')

http://jsfiddle.net/x8Ysd/

來源

2012-11-18 21:36:20

與Atif穆罕默德Ameenuddin，我不能投票還沒有，但你的回答讓我下手，感謝名單PAL） – Marchello

好，它工作在jsfiddle.net，而Chrome返回「未捕獲的SyntaxError ：非法令牌非法「。什麼可能是錯誤的？ – Marchello

在哪一行？在這裏粘貼這條線 –

jquery json用條件生成html按鈕

回答

相關問題