Question

我使用jQuery的.html（）属性以获取<li>的所有<ul class="answers_list">元素。

我的HTML看起来像这样：

<ul id="answers_list" class="list-unstyled mt-3 mb-4">
    <li class="row">
        <input id="answer_1" type="text" class="form-control answer_text mx-3 mb-3" placeholder="Type a possible answer" required="" style="width:400px;">
        <input id="check_1" type="checkbox" class="answer_checkbox">
    </li>
    <li class="row">
        <input id="answer_2" type="text" class="form-control answer_text mx-3 mb-3" placeholder="Type a possible answer" required="" style="width:400px;">
        <input id="check_2" type="checkbox" class="answer_checkbox">
    </li>
</ul>

当用户单击“添加字段”按钮时，我的jQuery代码正尝试向列表中添加一个输入字段。

$('#btn_add_answer').click(function(){
    var list = $('#answers_list').html();
    var answers_number = 1;
    $('#answers_list').find('.answer_text').each(function () {
        answers_number = answers_number + 1;
    });
    $('#answers_list').html(list+'<li class="row"><input id="answer_'+answers_number+'" type="text" class="form-control answer_text mx-3 mb-3" placeholder="Type a possible answer" required="" style="width:400px;"><input id="check_'+answers_number+'" type="checkbox" class="answer_checkbox"></li>');
});
</ul>

问题：它几乎可以完美地工作，但是如果用户在添加字段之前在输入中输入了任何内容，则将添加该新字段，但它将删除用户在所有其他字段中输入的内容。我该如何预防？

Answer 1

我没有看到您重新创建列表的原因，只是添加了一个项目，您可以跳过这一步并添加它。

$('#btn_add_answer').click(function(){
    var answer_number = $('#answers_list .row').length + 1;
    $('#answers_list').append('<li class="row"><input id="answer_'+answer_number+'" type="text" class="form-control answer_text mx-3 mb-3" placeholder="Type a possible answer" required="" style="width:400px;"><input id="check_'+answer_number+'" type="checkbox" class="answer_checkbox"></li>');
});

重新构建整个列表意味着，由于value属性不包含当前值，您最终将获得所有现有输入的默认值。

Answer 2

为此，我将使用jQuery .clone()方法...而且我同意Kevin B.关于id在这里的无用用法...

在未填充时首先克隆一行...并将其保留在变量中。然后，当您需要添加一行时，.append()的副本（再次克隆）。

要获取答案的数量，请使用.length属性。

var answerField = $(".row").first().clone();

$('#btn_add_answer').click(function() {

  $("#answers_list").append(answerField.clone());
  console.log( $("#answers_list .row").length + " answers...");
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="answers_list" class="list-unstyled mt-3 mb-4">
  <li class="row">
    <input type="text" class="form-control answer_text mx-3 mb-3" placeholder="Type a possible answer" required="" style="width:400px;">
    <input type="checkbox" class="answer_checkbox">
  </li>
  <li class="row">
    <input type="text" class="form-control answer_text mx-3 mb-3" placeholder="Type a possible answer" required="" style="width:400px;">
    <input type="checkbox" class="answer_checkbox">
  </li>
</ul>
<button id="btn_add_answer">Add an answer</button>

jQuery的.html（）：如何使用输入值获得结果？

2 个答案: