Question

我正在尝试创建一个页面，用户可以在其中创建一个问题表单，他们自己添加问题并更改他们想要问的问题类型。与Google表格几乎相同。根据问题类型，应在创建的问题下方显示一个框。当我尝试这样做时，该框仅出现在最后一个问题上，所以我相信每次添加新问题时它都会被覆盖。关于如何在每个问题下创建框的任何提示？

function createQuest() {
  number++;
  chooseTime();

  outputQuestion += '<div id="question' + number + '>';
  outputQuestion += '<p id="k"></p>';
  outputQuestion += '<h2>Question' + number + '</h2>';
  outputQuestion += '<form name="choose">';
  outputQuestion += '<textarea rows="1" cols="30" id="question' + number + '" name="text" placeholder="Question"></textarea>';
  outputQuestion += '<select id="sel' + number + '">';
  outputQuestion += '<option id="' + number + '" id="TEXT" onclick()>Text</option>';
  outputQuestion += '<option id="' + number + '" id="SLIDER">Rating</option>';
  outputQuestion += '</select>';


  outputQuestion += '<ul id="list-quest' + number + '">';
  outputQuestion += '</ul>';
  outputQuestion += '</form>';
  outputQuestion += '</div>';
  $("#list-create-doc").html(outputQuestion);
  textChosen(number);
}

var outputQuest1 = "";

function textChosen(nr) {
  outputQuest1 = "";

  outputQuest1 += '<div class="textbox" id="txt">';
  outputQuest1 += '<textarea rows="1" cols="30" placeholder="Answered with text"></textarea>';
  outputQuest1 += '</div>';

  var whereAdd = "#list-quest" + nr;
  console.log(whereAdd);
  $(whereAdd).html(outputQuest1);
}

<button id="btn" onclick="createQuest()">Legg til spørsmål</button>

Answer 1

您使用html()覆盖当前内容。使用append()添加如下新内容：

$("#list-create-doc").append(outputQuestion);

以下是jQuery.append和jQuery.html的文档！

单击每次按钮添加新div

1 个答案: