时间戳

首页 > 解决方案 > 无法使用 javascript 在标签内将值递增一

javascript - 无法使用 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>

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

标签： javascriptphpjquerybootstrap-4codeigniter-3

解决方案

变量在开始时设置，需要重新设置？要更改其值，您也没有在 for 循环中增加“i”，而是将其用作 add_fields 的变量。

试试这个

$(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--;
        });
    });

推荐阅读