在Jquery Mobile中動態創建和添加頁面

Question

我有一個數組，其中包含一堆Widget Ids [s1，s2，s3 ... etc]。 這個數組可以變化，有時它可以有5個id，有時它可以有2個id等。所以基本上，當我循環遍歷這個數組時，我希望能夠為數組中的每個id動態創建頁面。

這是我希望能夠為每個id動態創建的頁面的基本格式。

  <!--id should eqqual id# like s1,s2,s3,etc -->

   <div data-role="page" id="page5">

              <div data-role="header" data-position="fixed">
               <a data-iconpos="notext" href="#" data-role="button" data-icon="flat-menu"></a>
                    <h1>BasketBall Fanatico</h1>
                     <a data-iconpos="notext" href ="#page2" data-role="button" data-icon="home" title="Home">Home</a>
              </div>

                   <div data-role="content">

                    <ul data-role="listview" data-inset="true">

                     <li data-role="list-divider" data-theme="b">Raptors Score</li>
                     <li><h2>0</h2></li> 
                    </ul>
                   </div>


          </div>

這是我遍歷數組中的id並嘗試動態添加頁面的循環。這是我為獲得結果而嘗試但失敗的嘗試。

for(var i=0; i<widgetId.length; i++){

            var makePage = $("<div data-role='page' id="+widgetId[i]+">
              <div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#' data-role='button' data-icon='flat-menu'></a>
              <h1>BasketBall Fanatico</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div>
              <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>Raptors Score</li>
              <li><h2>0</h2></li></ul></div></div>");

            makePage.appendTo($mobile.pageContainer);

          }

我正在使用chrome控制台窗口，它告訴我：Uncaught SyntaxError：Unexpected token <。 但是，在查看我的代碼時，我看不到錯誤可能在哪里。 我的方法對動態創建頁面是否正確？ 高度贊賞所有答案。

我對jQuery和Web開發人員是新手，所以請提前道歉。

Answer 1

我必須將產品動態添加到拍賣頁面，並且使用了以下代碼。 問題是我不知道確切要在頁面上顯示多少個產品。

/* takes element type and all options for element returns html string for the element
* Arg1 is the type of element to create 
* Options is an array/list of key-value pairs. The even numbered objects in the array 
* will represent the attribute name, the odd elements will be the value of the attribute*/ 
function addElement(ELEMENT, options)
{
    var element = document.createElement(ELEMENT); //create the element

    var i = 0;//iterate through the array and set each element
    while(i < options.length)
       element.setAttribute(options[i++], options[i++]);
    return element;
}

然后在索引文件中執行“ fullProductList”是一個div，它將保存包含產品的所有div：

//get the html for each item and write it to the page
for( var i = 0; i < productList.length; i++)
    $("#fullProductList").append(getProductHTML(productList[i], i));

這是getProductHTML：

/* creates a parent div for each product that will be displayed on the page
 * a picture is displayed in the parent div then a child div is created
 * in order to display product info and a bid button which happens in another function*/
function getProductHTML(prod, id)
{//create the parent div
    var html = document.createElement('div');
    html.className = 'singleProduct';
    html.id = id;
    //append the picture to the parent div
    html.appendChild(addElement('img', ['SRC', prod.pic, 'ALT', prod.name, "height", "400px", 'class', 'pic']));
    //create div for product title
    var title = document.createElement('div');
    title.className = 'prodTitle';
    title.innerHTML = '<b>'+prod.name + "<b><BR>" ;
    html.appendChild(title);
    html.appendChild(writeProductInfo(prod));//this creates another child div for the product data
    return html;
}

我沒有給div本身編號，而是使用了每個產品隨附的數據庫中的ID。 我沒有包括writeProductInfo的代碼，因為我認為您應該能夠看到我是如何工作的。 我知道您的情況會與我遇到的情況有所不同，但希望能有所幫助。

Answer 2

經過幾次嘗試和錯誤，我已經弄清了錯誤。 似乎導致錯誤的原因是我的頁面結構在不同的行上。 因此，例如，如果所有內容都在同一行上，則可以像這樣正常工作。

for(var i=0; i<widgetId.length; i++){

            var makePage = $("<div data-role='page' id="+widgetId[i]+"><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#' data-role='button'data-icon='flat-menu'></a> <h1>BasketBall Fanatico</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>Raptors Score</li><li><h2>0</h2></li></ul></div></div>");

            makePage.appendTo($.mobile.pageContainer);

          }

我不知道它是什么，但是當所有內容都在線時，它似乎運行良好。 我希望這可以對將來出現類似錯誤的人或希望動態創建頁面的人有所幫助。