在选择时使用 jQuery 克隆 HTML DIV答案

【问题标题】：Clone HTML DIV with jQuery on select在选择时使用 jQuery 克隆 HTML DIV
【发布时间】：2015-03-04 11:48:53
【问题描述】：

我正在尝试根据为孩子数量选择的值克隆孩子年龄字段，以便选择每个孩子的年龄。 HTML 是：

房间 1

  <div class="col-xs-4">
       <label>Copii</label>
       <div  class="selector">
          <select id='kids-1'  name="rooms[0][child]" class="full-width">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             >
          </select>
       </div>
    </div>
    <div class="age-of-children no-display">
       <div class="row">
          <div class="col-xs-4 child-age-field">
             <label>Copil 1</label>
             <div class="selector validation-field">
                <select id='age-1' class="full-width" name="rooms[0][age][]">
                   <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>
                </select>
             </div>
          </div>
       </div>
    </div>

房间 2

  <div class="col-xs-4">
       <label>Copii</label>
       <div  class="selector">
          <select id='kids-2'  name="rooms[1][child]" class="full-width">
             <option value="0">0</option>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             >
          </select>
       </div>
    </div>
    <div class="age-of-children no-display">
       <div class="row">
          <div class="col-xs-4 child-age-field">
             <label>Copil 1</label>
             <div class="selector validation-field">
                <select id='age-2' class="full-width" name="rooms[1][age][]">
                   <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>
                </select>
             </div>
          </div>
       </div>
    </div>

使用的 jQuery 代码是

    // handle kid age from room 1
tjq('select[id=kids-1]').change(function(){
    var prev_kids = tjq('.age-of-children .child-age-field').length;
    tjq('.age-of-children').removeClass('no-display');
    var i;
    if (prev_kids > tjq(this).val()) {

        var current_kids = tjq(this).val();

        if (current_kids == 0) {
            current_kids = 1;
            tjq('.age-of-children').addClass('no-display');
        }

        for (i = prev_kids; i > current_kids; --i) {
            tjq('.age-of-children .child-age-field').eq(i-1).remove();
        }
    } else {
        for (i = prev_kids + 1; i <= tjq(this).val(); i++) {
            var clone_age_last = tjq('.age-of-children .child-age-field:last').clone();
            var clone_age = clone_age_last.clone();
            tjq('.age-of-children .row').append(clone_age);
            var name = clone_age.find('label').text().replace(/(\d+)/, function(match, p1)
            {
                return (parseInt(p1) + 1);
            });
            clone_age.find('label').text(name);
            clone_age.find('select').val(0);
            clone_age.find('.custom-select').text(0);
        }
    }
});
    // handle kid age from room 2
tjq('select[id=kids-2]').change(function(){
    var prev_kids = tjq('.age-of-children .child-age-field').length;
    tjq('.age-of-children').removeClass('no-display');
    var i;
    if (prev_kids > tjq(this).val()) {

        var current_kids = tjq(this).val();

        if (current_kids == 0) {
            current_kids = 1;
            tjq('.age-of-children').addClass('no-display');
        }

        for (i = prev_kids; i > current_kids; --i) {
            tjq('.age-of-children .child-age-field').eq(i-1).remove();
        }
    } else {
        for (i = prev_kids + 1; i <= tjq(this).val(); i++) {
            var clone_age_last = tjq('.age-of-children .child-age-field:last').clone();
            var clone_age = clone_age_last.clone();
            tjq('.age-of-children .row').append(clone_age);
            var name = clone_age.find('label').text().replace(/(\d+)/, function(match, p1)
            {
                return (parseInt(p1) + 1);
            });
            clone_age.find('label').text(name);
            clone_age.find('select').val(0);
            clone_age.find('.custom-select').text(0);
        }
    }
});

代码应根据孩子计数选择器选择的值克隆年龄 1 字段，以便我可以为每个孩子选择年龄。

我已经创建了JSFiddle

【问题讨论】：

我建议使用 angular.js，因为它可以为你节省大量的行。看看吧：campus.codeschool.com/courses/shaping-up-with-angular-js/intro
@Manticore 谢谢我会开始学习，但这需要一些时间，我的项目应该完成:)
小提琴在控制台上显示错误：ReferenceError: tjq is not defined
@GeorgeB 您需要支持旧版 Internet Explorer（即 name="rooms[0][child]" 语法，我假设您使用 PHP？

标签： javascript jquery html

【解决方案1】：

我认为你会重建一些 HTML 代码。

例如，我添加了.room-container 元素，以便更容易识别此元素和将包含的元素。

我希望我的代码能解决您的问题。

JSFiddle

HTML：

<div class="room-container">
<span> ROOM 1 </span>
      <div class="col-xs-4">
           <label>Copii</label>
           <div class="selector">
              <select id='kids-1'  name="rooms[0][child]" class="full-width">
                 <option value="0">0</option>
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
              </select>
           </div>
        </div>
        <div class="age-of-children no-display">
           <div class="row">
              <div class="col-xs-4 child-age-field">
                 <label>Copil 1</label>
                 <div class="selector validation-field">
                    <select id='age-1' class="full-width" name="rooms[0][age][]">
                       <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>
                    </select>
                 </div>
              </div>
           </div>
        </div>
</div>
<hr>
<div class="room-container">
<span>ROOM 2</span>

      <div class="col-xs-4">
           <label>Copii</label>
           <div  class="selector">
              <select id='kids-2'  name="rooms[1][child]" class="full-width">
                 <option value="0">0</option>
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 >
              </select>
           </div>
        </div>
        <div class="age-of-children no-display">
           <div class="row">
              <div class="col-xs-4 child-age-field">
                 <label>Copil 1</label>
                 <div class="selector validation-field">
                    <select id='age-2' class="full-width" name="rooms[1][age][]">
                       <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>
                    </select>
                 </div>
              </div>
           </div>
        </div>
</div>

JS：

$(document).on('change', '[id^="kids-"]', function (){

    //Getting index of current room
    var roomIndex = $(this).attr('name').split('rooms[')[1].split('][child]')[0]; 

    //Getting room container
    var roomContainer = $(this).closest('.room-container');

    //Variable with childs number
    var childsNumber = Number($(this).val());

    //First element `.age-of-children` which is used as template for next childs
    var firstAgeOfChildsElement = $(roomContainer).find('.age-of-children').eq(0);

    //Number of total exists `.age-of-children` elements
    var ageOfChildsElementsCount = $(roomContainer).find('.age-of-children').length;

    //Number of `.age-of-children` elements which are not hidden
    var ageOfChildsVisibleElementsCount = $(roomContainer).find('.age-of-children').not('.no-display').length;

    //Adding new `.age-of-children` element if number of elements is lower than selected value BEGIN
    if(ageOfChildsElementsCount < childsNumber){

        for(var i=0;i<childsNumber;i++){

            if($(roomContainer).find('.age-of-children').eq(i).length < 1){

                //Cloning first `.age-of-children` element
               var newAgeOfChildsElement = $(firstAgeOfChildsElement).clone();

               //Setting new id for cloned `.age-of-children` element, and setting default value (5)
               $(newAgeOfChildsElement).find('select').attr('id', 'kid-'+i).val('5');

               //Setting new label title for clonded `.age-of-children` element
               $(newAgeOfChildsElement).find('label').text('Copil '+(i+1));

               //Appending cloned `.age-of-children` element to `roomContainer`
               $(roomContainer).append(newAgeOfChildsElement);
            }
        }
    }


    //Hidding all exists `.age-of-children` elements
    $(roomContainer).find('.age-of-children').addClass('no-display');


    //Unhidding exists `.age-of-children` elements if number of visible elements is lower than selected value (`index` of current element in loop have same or lower index than selected number of childs) 
    $(roomContainer).find('.age-of-children').each(function (){

        //Checing if index of current `.age-of-children` inside `roomContainer` element is lower than `childsNumber`
        if($(roomContainer).find('.age-of-children').index($(this)) < childsNumber){

            $(this).removeClass('no-display');
        }
    });

});

$(document).ready(function (){

    //Setting default value and triggering change for each item
    $('[id^="kids-"]').val(2).trigger('change');
});

【讨论】：