Question

我想之前已经问过这个问题，但我在论坛上找不到答案。我有一个带有问题的表格和5个可能的答案。如果用户想要添加答案，他会点击“添加答案”。这很好。

然而，当用户添加所有可能的响应并决定取消回复4，然后添加响应时，响应计数器不再跟随，并且可以有多次回答5.

如何始终按时间顺序排列？

HTML

<div class="panel-body">
 <form class="form-horizontal left-label">
    <div class="form-group">
        <label class="control-label col-lg-2">Question</label>
        <div class="col-lg-5">
            <input class="form-control" type="text">
            </div>
        </div>
        <div class="input_fields_wrap">
            <div class="form-group" style="margin-top:40px;">
                <label class="control-label col-lg-2">Answer 1</label>
                <div class="col-lg-5">
                    <input class="form-control" type="text" name="mytext[]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-lg-2">Answer 2</label>
                  <div class="col-lg-5">
                    <input class="form-control" type="text" name="mytext[]">
                  </div>
                </div>
             </div>

             <div class="form-group">
               <div class="col-lg-offset-2 col-lg-10">
                 <a class="btn btn-med gray-bg add_field_button" href="#">Add an answer</a> <span class="rep_possible"></span>
             </div>
       </div>
     </form>
   </div>

和javascript

var max_fields      = 3;
var wrapper         = $('.input_fields_wrap');
var add_button      = $('.add_field_button');

var x = 0;
$('.rep_possible').html('Encore ' + (x+3));
$(add_button).click(function (e) {
    e.preventDefault();
    if(x < max_fields){
        x++;
        if (max_fields-x == 0) {
            $('.add_field_button').attr('disabled', 'disabled');
            $('.rep_possible').html('5 réponses maximum');
        } else {
            $('.rep_possible').html('Encore ' + (max_fields-x));
        }
        wrapper.append('<div class="form-group" data-option="' + (x+2) + '"><label class="control-label col-lg-2">Réponse ' + (x+2) + '</label><div class="col-lg-5"><input class="form-control" type="text" name="mytext[]"></div><div class="col-lg-1"><a class="btn btn-med btn-danger remove_field" data-toggle="tooltip" data-placement="bottom" title="Supprimer cette réponse" title="Supprimer cette réponse" href="#">X</a></div></div>');
    }
});

wrapper.on("click",".remove_field", function (e) {
    e.preventDefault();
    $(this).parent().closest('.form-group').remove();
    x--;
    if (max_fields-x != 0) {
        $('.add_field_button').removeAttr('disabled');
        $('.rep_possible').html('Encore ' + (max_fields-x));
    }
});

请找到jsfiddle here

带图片的好总结

enter image description here

Answer 1

删除后，您需要重新编号。

我将答案编号包裹在span

中

<span class="counter"><span>

然后更改了添加和删除处理程序以调用以下函数

function reNumberAnswers(){
 wrapper.find('.form-group[data-option]').each(function(index){
       var self = $(this);
        self.attr('data-option', index + 3)
            .find('.counter').text(index + 3);
    });
}

演示http://jsfiddle.net/gaby/qLr5huLw/3/

Answer 2

你可以修改你的删除功能：

var $formGroup = $(this).parent().closest('.form-group'),
    $siblings = $formGroup.siblings('.form-group.added');
$formGroup.remove();
$siblings.each(function() {
    var index = $(this).index() + 1,
        $label = $(this).find('label.control-label'),
        labelValNew = $label.text().replace(/\d/, index);
    $label.text(labelValNew);
});

请参阅此updated fiddle

Answer 3

请参阅此更新fiddle
为你的答案div添加一个额外的类名并始终删除最后一个答案。

<div class="form-group answer" data-option="' + (x+2) + '">

$('.answer:last').remove();

否则，你必须循环回答并用正确的值重绘它们。

备选方案，您可以查看angularjs或knockout并使用可观察的内容。

动态删除输入字段

3 个答案: