javascript - 删除和创建新部分jquery时无法更新计数器

标签 javascript jquery 

/*creates phoens dynamically*/

var phoneList = [];

function add_phone() {
  var index = phoneList.length+1;
    phoneList.push('phone: '+index);
    var divtest = '<div class="form-group removeclass'+index+'">'+
    '<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone ( '+index+' )</span>'+
    '<div class="col-sm-3 nopadding">'+
    '<div class="form-group">'+
    ' <input type="text" class="form-control" name="a[]" value="" placeholder="Type"></div></div>'+
    '<div class="col-sm-3 nopadding"><div class="form-group">'+
    '<input type="text" class="form-control"  name="b[]" value="" placeholder="Model"></div>'+
    '</div><div class="col-sm-3 nopadding">'+
    '<div class="form-group"> <input type="text" class="form-control" name="c[]" value="" placeholder="Color">'+
    '</div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> '+
    '<select class="form-control" name="d[]">'+
    '<option value="">Year</option><option value="2015">2015</option><option value="2016">2016</option>'+
    '<option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> '+
    '<button class="btn btn-danger" type="button" onclick="remove_phone('+ index +');"> <span '+
    'class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div '+
    'class="clear"></div>';

     $('#education_fields').append(divtest);
    updatePhonePicker();
}
   function remove_phone(rid) {
     $("#phone_picker option[value='"+rid+"']").remove();
     $('.removeclass'+rid).remove(); 
     phoneList.splice(phoneList.indexOf(rid),1);
     updatePhonePicker();
   }

   function updatePhonePicker(){
    var options = '<option selected disabled>---</option>';
    phoneList.forEach(function(element, index){
       options+='<option value="'+element+'">'+element+'</option>'
    })
    $('#tab_logic').find('tr').each(function(ind,ele){
     var r = $(ele).find("#phone_picker").empty().append(options);
    });
      
   }

/*Add details about phone added here*/
$(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control' title='Phone' id='phone_picker'><option selected disabled>---</option></select> </td><td><input  name='mail"+i+"' type='text' placeholder='field 1'  class='form-control input-md'></td><td><input  name='mobile"+i+"' type='text' placeholder='field 2'  class='form-control input-md'></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
      updatePhonePicker();
  });
     $("#delete_row").click(function(){
       if(i>1){
     $("#addr"+(i-1)).html('');
     i--;
     }
   });

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Add Phone-->
		<div class="panel panel-default">
			  <div class="panel-heading">Phone Information</div>
			  <div class="panel-body">
			  
			  <div id="education_fields">
			          
			 </div>
			  
	
			  <div class="input-group">
			      <div class="input-group-btn">
				       <span class="help-block" style="font-weight: 400; font-size: 14px;">Add Phone.</span>
			        <button class="btn btn-success" type="button"  onclick="add_phone();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
			      </div>
			    </div>
			</div>
		</div>
    
   
  <!--Individual phone information-->
		<div class="container">
		    <div class="row clearfix">
				<div class="col-md-12 column">
					  <span class="help-block" style="font-weight: 400; font-size: 14px;">Phone selected additional details.</span>
					<table class="table table-bordered table-hover" id="tab_logic">
						<thead>
							<tr>
								<th class="text-center">
									#
								</th>
								<th class="text-center">
									Phone
								</th>
								<th class="text-center">
									Type
								</th>
								<th class="text-center">
									Carrier
								</th>
							</tr>
						</thead>
						<tbody>
							<tr id='addr0'>
								<td>
								1
								</td>
								<td>
								<select class="form-control" title="Phone" id="phone_picker">
								     <option selected disabled>---</option>
								</select>
								</td>
								<td>
								<input type="text" placeholder='field 1' class="form-control"/>
								</td>
								<td>
								<input type="text" placeholder='field 2' class="form-control"/>
								</td>
							</tr>
		                    <tr id='addr1'></tr>
						</tbody>
					</table>
				</div>
			</div>
			<a id="add_row" class="btn btn-default pull-left">Add Phone</a><a id='delete_row' class="pull-right btn btn-default">Delete Phone</a>
		</div>

单击“添加电话”时，我可以选择根据需要添加任意数量的电话。添加或删除新电话时，电话计数(创建的电话数量)会添加到“电话选择的其他详细信息”选择选项中。

我的问题是，当我创建 3 个电话部分然后删除电话 #1 并再次添加另一个电话时，它会给我相同的电话计数器(例如添加 1、2、3 删除 1 添加另一个电话，再次获得 1 和 1 并且它应该是这样的，每次都应该是一个单位柜台(电话))。

更具体的步骤如下:

  1. 点击“添加电话”一次、第二次和第三次。
  2. 单击标题为“Phone(1)”的红色按钮。
  3. 检查当前电话的数量是否与“电话”选择/下拉列表中的相符。
  4. 您会看到电话显示的数量与选择的不匹配。

最佳答案

您的问题在这一行:

 var index = phoneList.length+1;

因为您使用像 removeclass1、removeclass2 这样的类创建了新的 div ..... 您可以考虑直接获取最后一个 div，因此提取数字而不是递增 1:

var index = 1;
if ($('#education_fields > div').length > 0) {
    index = 1 + +$('#education_fields > div:last').attr('class').match(/.*removeclass(\d+).*/)[1];
}

来自您的评论:

Ok this is good but if you look down the table column 'Phone' and the select/dropdown, it seems not be getting updated when deleting 'phone'/section

您可以更改 updatePhonePicker 以动态构建直接从 div 获取数据的选项:

来自:

phoneList.forEach(function(element, index){
    options+='<option value="'+element+'">'+element+'</option>'
})

到:

$('#education_fields > div > span').each(function(idx, ele) {
    var txt = ele.textContent.replace(/[()]/g, '').trim();
    options+='<option value="'+txt+'">'+txt+'</option>'
})


var phoneList = [];

function add_phone() {
    var index = 1;
    if ($('#education_fields > div').length > 0) {
        index = 1 + +$('#education_fields > div:last').attr('class').match(/.*removeclass(\d+).*/)[1];
    }
    phoneList.push('phone: '+index);
    var divtest = '<div class="form-group removeclass'+index+'">'+
            '<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone ( '+index+' )</span>'+
            '<div class="col-sm-3 nopadding">'+
            '<div class="form-group">'+
            ' <input type="text" class="form-control" name="a[]" value="" placeholder="Type"></div></div>'+
            '<div class="col-sm-3 nopadding"><div class="form-group">'+
            '<input type="text" class="form-control"  name="b[]" value="" placeholder="Model"></div>'+
            '</div><div class="col-sm-3 nopadding">'+
            '<div class="form-group"> <input type="text" class="form-control" name="c[]" value="" placeholder="Color">'+
            '</div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> '+
            '<select class="form-control" name="d[]">'+
            '<option value="">Year</option><option value="2015">2015</option><option value="2016">2016</option>'+
            '<option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> '+
            '<button class="btn btn-danger" type="button" onclick="remove_phone('+ index +');"> <span '+
            'class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div '+
            'class="clear"></div>';

    $('#education_fields').append(divtest);
    updatePhonePicker();
}
function remove_phone(rid) {
    $("#phone_picker option[value='"+rid+"']").remove();
    $('.removeclass'+rid).remove();
    phoneList.splice(phoneList.indexOf(rid),1);
    updatePhonePicker();
}

function updatePhonePicker(){
    var options = '<option selected disabled>---</option>';
    $('#education_fields > div > span').each(function(idx, ele) {
        var txt = ele.textContent.replace(/[()]/g, '').trim();
        options+='<option value="'+txt+'">'+txt+'</option>'
    })
    $('#tab_logic').find('tr').each(function(ind,ele){
        var r = $(ele).find("#phone_picker").empty().append(options);
    });

}

/*Add details about phone added here*/
$(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){
        $('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control' title='Phone' id='phone_picker'><option selected disabled>---</option></select> </td><td><input  name='mail"+i+"' type='text' placeholder='field 1'  class='form-control input-md'></td><td><input  name='mobile"+i+"' type='text' placeholder='field 2'  class='form-control input-md'></td>");

        $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
        i++;
        updatePhonePicker();
    });
    $("#delete_row").click(function(){
        if(i>1){
            $("#addr"+(i-1)).html('');
            i--;
        }
    });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!--Add Phone-->
<div class="panel panel-default">
    <div class="panel-heading">Phone Information</div>
    <div class="panel-body">

        <div id="education_fields">

        </div>


        <div class="input-group">
            <div class="input-group-btn">
                <span class="help-block" style="font-weight: 400; font-size: 14px;">Add Phone.</span>
                <button class="btn btn-success" type="button"  onclick="add_phone();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
            </div>
        </div>
    </div>
</div>


<!--Individual phone information-->
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <span class="help-block" style="font-weight: 400; font-size: 14px;">Phone selected additional details.</span>
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                <tr>
                    <th class="text-center">
                        #
                    </th>
                    <th class="text-center">
                        Phone
                    </th>
                    <th class="text-center">
                        Type
                    </th>
                    <th class="text-center">
                        Carrier
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr id='addr0'>
                    <td>
                        1
                    </td>
                    <td>
                        <select class="form-control" title="Phone" id="phone_picker">
                            <option selected disabled>---</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" placeholder='field 1' class="form-control"/>
                    </td>
                    <td>
                        <input type="text" placeholder='field 2' class="form-control"/>
                    </td>
                </tr>
                <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-default pull-left">Add Phone</a><a id='delete_row' class="pull-right btn btn-default">Delete Phone</a>
</div>

关于javascript - 删除和创建新部分jquery时无法更新计数器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46038851/

上一篇：javascript - 从 VBA 调用 JavaScript

下一篇：javascript - 如何在 react 组件中嵌入谷歌地图

相关文章：

javascript - 使用 Dimple.js 渲染图表时出现问题

jquery - event.preventDefault() 总是在函数结束之前

javascript - 以随机序列设置动画元素

javascript - 可以从 jqGrid 标题中删除展开/折叠列吗？

jquery - 在 bootstrap 模式中使用 ajax 加载内容

javascript - 我如何通过chrome的选择器获取元素？

javascript - 如何等待异步函数返回？

javascript - module.js 的 Ionic Sere 错误

javascript - 在 node.js 中的 for 循环后完成多个 writeFile 函数时解决 promise

javascript - 如何放大 slider 中的图像

©2024 IT工具网  联系我们