Question

我正在尝试创建一个动态的java脚本移动测验，用户可以动态地在单个问题上添加另一个（多个）答案，例如“你最喜欢的水果是什么？”

我在这里看到了JavaScript的示例：Javascript Add Dynamic Input Field

但是我还没有看到任何可以删除输入字段的示例用户单击“提交并添加另一个水果”按钮，以便他们可以输入:(在移动设备上工作）

apples，点击提交并添加另一种水果
梨，点击提交并添加另一种水果
oranges，点击提交并添加另一种水果
kiwi，点击提交下一个问题

我在想动态创建的输入字段名称问题11.01，问题11.02，问题11.03，问题11.04 或问题/部分：q001p1，q001p2，q001p3，q001p4

该解决方案还需要使用后退提交按钮如果用户意识到他不想加梨作为第二个水果和香蕉的变化

我在用户“提交到下一个问题”后隐藏了div 然后使用javascript使下一个问题div可见，以便在移动设备中给出下一页效果，用户感觉他正在进行您将在DMV计算机测试中看到的动态测验

<div class="questionquiz11" >



    <h2>Question 11</h2>
 <HR>

    <p>What is your favorite fruit(s)?   </p>

    <input type=text name="question11.01" >

 <BR> 

    <input type=submit id="backbutton"    value="Back">

    <input type=submit id="button"    value="Submit to next question">

    <input type=submit id="addfruit"  value="Submit and Add Another Fruit">



</div>



<div class="questionquiz12" style="display: none">



    <h2>Question 12</h2>
 <HR>

    <p>What is your favorite veggies(s)?   </p>

    <input type=text name="question12.01" >

 <BR> 

    <input type=submit id="backbutton"    value="Back">

    <input type=submit id="button"    value="Submit to next question">

    <input type=submit id="addveggies"  value="Submit and Add Another Veggie">



</div>

更新：可能动态创建div类型示例代码（用它做一些测试）

  var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;

Answer 1

如果您希望混合使用添加输入字段和在问题之间导航的功能，请首先在<div>内通过mkyong重新创建示例。您可以使用jQuery .append(...)函数和附加内的另一个输入框来完成此操作。

当用户导航到下一个问题.hide()问题的<div>和.show()下一个问题的<div>时。

尝试创建动态JavaScript移动测验

1 个答案: