主页 / 问题 / 780807
Accepted
NTP
Asked:2020-02-06 05:32:04 +0000 UTC2020-02-06 05:32:04 +0000 UTC

删除块时的偏移计数器

  • 772

有一个代码可以动态生成表单字段和一个<select>用于选择捆绑问题的字段。但是，如果我从列表中间删除一个字段，比如说字段1-2-3和删除2 ，那么字段1-3仍然存在，问题是我需要移动下面的所有字段，使其变为1-2删除后也改变了字段的编号select（这是因为你不能只改变数字，然后select会显示一个额外的问题）。我不能只删除3而不是2 ，如果第 3 个块中有一些信息，并且第2 个块被删除，那么来自3的信息就会消失。

function addField() {
  var text = "";
  var telnum = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3)) + 1;

  for (i = 1; i < telnum; i++) {
    text += '<option>Вопрос ' + i + '</option>';
  }

  $('div#add_field_area').append('<div id="add' + telnum + '" class="add"><label> Поле №' + telnum + ' </label><textarea name="val[]"></textarea><select class="chzn-select' + telnum + '" name="require[]">' + text + '</select><span class="deletebutton" onclick="deleteField(' + telnum + ');"> удалить</span></div>');


}

function deleteField(id) {

  $("div#add" + id).remove();

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add_field_area">
  <div id="add1" class="add">
    <label> Поле №1</label>
    <textarea name="val[]"></textarea>
  </div>
</div>
<input type="button" value="Добавить поле" onClick="addField();">

UPD。带有嵌套块的代码：

<div id="add_field_area">    
    <div id="block1" class="block">
        <div class="number">1.</div>    
        <div class="wrapAreas">
            <div class="wrapTextarea">
                <textarea></textarea>
            </div>
            <div class="wrapSelect">
            </div>
        </div>    
    </div>
</div>

javascript

1 个回答

  1. Best Answer

    看，我删除了删除功能，添加了重新绘制表单的 rePain 功能。优点：

    1. 无需为数字而烦恼
    2. 当 addField 函数发生变化时，所有的变化都是 touch 和 rePain

    //Добавляем поле
function addField(count, textTextarea) {
	var text = "";
	var countInput = (count > 0 ? count : ($(".add").length + 1));
	var textTextarea = (textTextarea != undefined ? textTextarea : '')
	
	for (i = 1; i < countInput; i++) {
		text += '<option>Вопрос ' + i + '</option>';
	}

	$('div#add_field_area').append('<div id="add' + countInput + '" class="add"><label> Поле №' + countInput + ' </label><textarea data-id="'+countInput+'" name="val[]">'+textTextarea+'</textarea><select class="chzn-select' + countInput + '" name="require[]">' + text + '</select><span class="deletebutton" onclick="rePain(' + countInput + ');"> удалить</span></div>');
}

//Рисуем форму заново
function rePain(id){
	objText = {};
	
	a = 2;
	$("div#add_field_area .add").each(function(i, obj){
		if(i != 0){
			if((i + 1) != id){
				objText[a] = {text:$(obj).find('textarea').val()};
				a++;
			}
			$(obj).remove();
		}
	});
	
	for(data in objText){
		addField(data, objText[data].text);
	}
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add_field_area">
  <div id="add1" class="add">
    <label> Поле №1</label>
    <textarea name="val[]"></textarea>
  </div>
</div>


<input type="button" value="Добавить поле" onClick="addField();">

    • 2

相关问题