1

我有一个只有一个标题的手风琴，它将显示文档名称和编号，如果单击标题，手风琴将打开并显示为文档的详细信息页面，现在我要问的是。每个登录到移动应用程序的用户，都会有不同数量的文件连接到用户名......现在我需要的是如何让那个手风琴复制自己，以便为 web 服务加载的 X 数量的文件。我在 javascript 中需要这个，因为我使用的是：-visual studio express for windows phone/HTML5/CSS/Javascript。所有的教程都显示了一个为数据创建一个新的 for 循环，但我已经有了一个 div（手风琴），我需要的只是加载它，以免说 10 次只是为了看看它是否有效，然后将假数据输入输入字段

手风琴的 HTML

    <div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1)">
  <div class="Accordiontitle" onselectstart="return false;">
    <a>
      <input class="AccordionLink" type="button" href="ItemPages.html" id="docname"/>
    </a>
    <br/>
    <a id="POnumber"></a>
  </div>
</div>
<div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
  <form>
    <p>
      <label for="create" >Created by :</label>
      <input type="text" style="margin-left:60px;" readonly="readonly" DISABLED="DISABLED" size="22" id="create"/>
    </p>
    <p>
      <label for="createdate" >Created Date :</label>
      <input type="text" style="margin-left:43px;" readonly="readonly" DISABLED="DISABLED" size="22" id="createdate"/>
    </p>
    <p>
      <label for="process" >Process name :</label>
      <input type="text" style="margin-left:36px;" readonly="readonly" DISABLED="DISABLED" size="22" id="process"/>
    </p>
    <p>
      <label for="transtype">Transaction type :</label>
      <input type="text" style="margin-left:20px;" readonly="readonly" DISABLED="DISABLED" size="22" id="transtype"/>
    </p>
    <p>
      <label for="lastact">Last action :</label>
      <input type="text" style="margin-left:61px;" readonly="readonly" DISABLED="DISABLED" size="22" id="lastact"/>
    </p>
    <p>
      <label for="lastuser">Last user :</label>
      <input type="text" style="margin-left:73px;" readonly="readonly" DISABLED="DISABLED" size="22" id="lastuser"/>
    </p>
    <p>
      <label for="lastupd">Last update :</label>
      <input type="text" style="margin-left:55px;" readonly="readonly" DISABLED="DISABLED" size="22" id="lastupd"/>
    </p>
    <p>
      <label for="duration">Duration :</label>
      <input type="text" style="margin-left:78px;" readonly="readonly" DISABLED="DISABLED" size="22" id="duration"/>
    </p>
    <p>
      <label for="saved">Saved :</label>
      <input type="text" style="margin-left:93px;" readonly="readonly" DISABLED="DISABLED" size="22" id="saved"/>
    </p>
    <p>
      <label for="adhoc">Ad hoc user :</label>
      <input type="text" style="margin-left:53px;" readonly="readonly" DISABLED="DISABLED" size="22" id="adhoc"/>
    </p>
  </form>
</div>
</div>

即使是正确的网站链接也可以使用:) thnx

4

1 回答 1

1

我想这是第一步...

/* a helper method */

function getElsByClassName(classname, container){
    var rv = [];
    container = container || document;

    var elems  = container.getElementsByTagName('*')
    if (elems.length){
        for (var x in elems ){
            if (elems[x] && elems[x].className && elems[x].className == classname){
                rv.push(elems[x]);
            }
        }
    }
    return rv; 
}

/* the code */
var accordions = document.getElementById("accordions"),
    accordion = getElsByClassName("AccordionContainer")[0],
    numberOfAcc = 10;

for(var i = 0; i< numberOfAcc; i++){
    var obj = accordion.cloneNode(true),
        btn = getElsByClassName("runAccordionButton", obj)[0];
    /* here you can attach on click handlers and set values using javascript */
   btn.onclick = function() {
      alert('clicked It');
      //here goes the logic
   };

    //setting values
   var creator = getElsByClassName('create',obj)[0]
   creator.value = 'John Do the ' + i + 'th';  


    //add it to the container       
    accordions.appendChild(obj);
}



​
于 2012-10-18T08:52:20.083 回答