无法使用javascript在标签内部将值增加一

我正在动态添加字段。每当新创建的字段时，我只想显示输入字段或标签字段编号。假设如果单击以动态添加新字段，则如果出现第二个，则应调用1，然后应调用2。我在编码中尝试了一些逻辑，但没有成功。

$(function() {
	/*here my values to increment whenever added newly form	*/
		var i = 1;
		i++;
		var max_fields = 6;
		var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
		var this_is_field_wrapper = $(".this_is_field_wrapper");
		var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults[]" name="selected_adults[]" class="form-control"><option   value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+i+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs[]" name="selected_childs[]" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col"  value="1">1</option><option id="second_child_col"  value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select  class="form-control" id="selected_childs_age_group_one[]" name="selected_childs_age_group_one[]"><option  value="1">1</option><option  value="2">2</option><option  value="3">3</option><option  value="4">4</option><option  value="5">5</option><option  value="6">6</option><option  value="7">7</option><option  value="8">8</option><option  value="9">9</option><option  value="10">10</option><option  value="11">11</option><option  value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two[]" name="selected_childs_age_group_two[]"><option  value="1">1</option><option  value="2">2</option><option  value="3">3</option><option  value="4">4</option><option  value="5">5</option><option  value="6">6</option><option  value="7">7</option><option  value="8">8</option><option  value="9">9</option><option  value="10">10</option><option  value="11">11</option><option  value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
	
	
		//here we starting counting...
		var input_count=1;
		//add buttong dynamically over here...
		$(this_button_work_for_click_to_add_rooms).click(function(event) {
			/* Act on the event */
			if(input_count<max_fields){
				input_count++;
				$(this_is_field_wrapper).append(add_fields);
			}
		});
		$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
			e.preventDefault();
			$(this).parent('div').remove();
			input_count--;
		});
	});

<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults[]" name="selected_adults[]" class="form-control">
<option   value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>1st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs[]" name="selected_childs[]" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col"  value="1">1</option>
<option id="second_child_col"  value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select  class="form-control" id="selected_childs_age_group_one[]" name="selected_childs_age_group_one[]">
<option  value="1">1</option>
<option  value="2">2</option>
<option  value="3">3</option>
<option  value="4">4</option>
<option  value="5">5</option>
<option  value="6">6</option>
<option  value="7">7</option>
<option  value="8">8</option>
<option  value="9">9</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two[]" name="selected_childs_age_group_two[]">
<option  value="1">1</option>
<option  value="2">2</option>
<option  value="3">3</option>
<option  value="4">4</option>
<option  value="5">5</option>
<option  value="6">6</option>
<option  value="7">7</option>
<option  value="8">8</option>
<option  value="9">9</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>                     	
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>
</body>
</html>

正如您所看到的，无论何时动态添加，都会给第二个空间。不增加值，也不显示该字段的值。请帮忙提前感谢

变量是在启动时设置的，是否需要重新设置？为了更改其值，您也没有在for循环中递增"i"，而是将其用作addfields的变量。

试试这个

$(function() {
/*here my values to increment whenever added newly form */
var i = 1;
i++;
var max_fields = 6;
var this_button_work_for_click_to_add_rooms = $(".this_button_work_for_click_to_add_rooms");
var this_is_field_wrapper = $(".this_is_field_wrapper");

//here we starting counting...
var input_count=1;
//add buttong dynamically over here...
$(this_button_work_for_click_to_add_rooms).click(function(event) {
/* Act on the event */
if(input_count<max_fields){
input_count++;
var add_fields = '<div><div class="row"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults[]" name="selected_adults[]" class="form-control"><option   value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>'+input_count+' Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs[]" name="selected_childs[]" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col"  value="1">1</option><option id="second_child_col"  value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select  class="form-control" id="selected_childs_age_group_one[]" name="selected_childs_age_group_one[]"><option  value="1">1</option><option  value="2">2</option><option  value="3">3</option><option  value="4">4</option><option  value="5">5</option><option  value="6">6</option><option  value="7">7</option><option  value="8">8</option><option  value="9">9</option><option  value="10">10</option><option  value="11">11</option><option  value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two[]" name="selected_childs_age_group_two[]"><option  value="1">1</option><option  value="2">2</option><option  value="3">3</option><option  value="4">4</option><option  value="5">5</option><option  value="6">6</option><option  value="7">7</option><option  value="8">8</option><option  value="9">9</option><option  value="10">10</option><option  value="11">11</option><option  value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';
$(this_is_field_wrapper).append(add_fields);
}
});
$(this_is_field_wrapper).on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).parent('div').remove();
input_count--;
});
});

试试这个：

<!DOCTYPE html>
<html>
<head>
<title>Welcome|Home</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="this_is_field_wrapper">
<div class="row item">
<div class="form-group">
<div class="col-xs-1">
<h6>Options -</h6>
<h6 class="#">Adults(12+)</h6>
<select id="selected_adults[]" name="selected_adults[]" class="form-control">
<option   value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6><span class="room_no">1</span> st Room</h6>
<h6 class="m_label">Child(0-12)</h6>
<select id="selected_childs[]" name="selected_childs[]" onchange="displayingNumberOfChildAge(this);" class="form-control">
<option>select</option>
<option id="first_child_col"  value="1">1</option>
<option id="second_child_col"  value="2">2</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(1)Age</h6>
<select  class="form-control" id="selected_childs_age_group_one[]" name="selected_childs_age_group_one[]">
<option  value="1">1</option>
<option  value="2">2</option>
<option  value="3">3</option>
<option  value="4">4</option>
<option  value="5">5</option>
<option  value="6">6</option>
<option  value="7">7</option>
<option  value="8">8</option>
<option  value="9">9</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
</select>
</div>
<!-- </div>
<div class="form-group"> -->
<div class="col-xs-1">
<h6>optional</h6>
<h6 class="m_label">Child(2)Age</h6>
<select class="form-control" id="selected_childs_age_group_two[]" name="selected_childs_age_group_two[]">
<option  value="1">1</option>
<option  value="2">2</option>
<option  value="3">3</option>
<option  value="4">4</option>
<option  value="5">5</option>
<option  value="6">6</option>
<option  value="7">7</option>
<option  value="8">8</option>
<option  value="9">9</option>
<option  value="10">10</option>
<option  value="11">11</option>
<option  value="12">12</option>
</select>
</div>
<div class="col-xs-1">
<a href="javascript:void(0);" class="this_button_work_for_click_to_add_rooms" title="Add field">Click & Add Rooms</a>                         
</div>
</div>
<!-- here ending form group -->
</div>
<!-- here ending row -->
</div>

</body>
</html>

JavaScript:

<script>
$(function() {

//add buttong dynamically over here...
$('.this_button_work_for_click_to_add_rooms').click(function(event) {
var numItems = $('.item').length;
var count = numItems +1;
var add_fields = '<div><div class="row item"><div class="form-group"><div class="col-xs-1"><h6>Options -</h6><h6 class="#">Adults(12+)</h6><select id="selected_adults[]" name="selected_adults[]" class="form-control"><option   value="1">1</option><option selected="selected" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6><span class="room_no">'+count+'</span> Room</h6><h6 class="m_label">Child(0-12)</h6><select id="selected_childs[]" name="selected_childs[]" onchange="displayingNumberOfChildAge(this);" class="form-control"><option>select</option><option id="first_child_col"  value="1">1</option><option id="second_child_col"  value="2">2</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(1)Age</h6><select  class="form-control" id="selected_childs_age_group_one[]" name="selected_childs_age_group_one[]"><option  value="1">1</option><option  value="2">2</option><option  value="3">3</option><option  value="4">4</option><option  value="5">5</option><option  value="6">6</option><option  value="7">7</option><option  value="8">8</option><option  value="9">9</option><option  value="10">10</option><option  value="11">11</option><option  value="12">12</option></select></div><!-- </div><div class="form-group"> --><div class="col-xs-1"><h6>optional</h6><h6 class="m_label">Child(2)Age</h6><select class="form-control" id="selected_childs_age_group_two[]" name="selected_childs_age_group_two[]"><option  value="1">1</option><option  value="2">2</option><option  value="3">3</option><option  value="4">4</option><option  value="5">5</option><option  value="6">6</option><option  value="7">7</option><option  value="8">8</option><option  value="9">9</option><option  value="10">10</option><option  value="11">11</option><option  value="12">12</option></select></div><a href="javascript:void(0);" class="remove_input_button" title="Remove field">remove</a></div><!-- here ending form group --></div><!-- here ending row --></div>';

$(".this_is_field_wrapper").append(add_fields);
});
$('.this_is_field_wrapper').on('click','.remove_input_button',function(e){
e.preventDefault();
$(this).closest('div.item').remove();
numberRows();
});
function numberRows() {
$('.room_no').each(function(i) {
$(this).text(i + 1);
console.log(i);
});
}
});
</script>

相关内容

最新更新

热门标签：