Question

我有一个包含一堆Widget ID [s1，s2，s3 ......等]的数组。这个数组可以变化，因为有时它可以有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：意外的令牌＆lt; 。但是，在查看我的代码时，我看不出错误可能在哪里。我的方法是否正确动态创建页面？所有答案都非常感谢。

我是jquery和web dev的新手，所以请提前道歉。

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

我使用每个产品提供的数据库中的ID，而不是自己对div进行编号。我没有包含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);

          }

我不知道它是什么，但当一切都在线时似乎工作正常。我希望这可以帮助将来出现类似错误的人或希望动态创建页面的人。

在Jquery Mobile中动态创建和添加页面

2 个答案: