如何使功能运行仅与每个克隆的 div 分开，而不是与原始的

Question

我需要运行一个jquery函数来改变下拉菜单，但是当我克隆div元素并且克隆元素的下拉菜单发生变化时，效果发生在第一个 div.

$(document).on('change', '#extrabed', function() {
  var value2 = $(this).val();
  var toAppend2 = '';
  var $container2 = $(this).siblings('#container2')

  switch (value2) {
    case 'No':
      toAppend2 = (function() {
        $("#extbed").hide();
      });
      $container2.html(toAppend2);
      return;
      break;

    case 'Yes':
      toAppend2 = (function() {
        $("#extbed").show();
      });
      $container2.html(toAppend2);
      return;
      break;

    default:
      return;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container2">

  <div id="container2">
    <div id='extbed' style='display: none;'>
      <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30'>
      <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'>
    </div>
  </div>

demo

此外，克隆后，新的 div 会采用原始值。我该如何重置它？

Answer 1

Working fiddle.

您需要使用 classes 而不是 id，因为当您克隆元素时会导致您使用重复的标识符，这会使您的 HTML 代码无效。

因此，当您通过 classes 更改 ID 时，您必须将 class extbed 传递给 x/y 函数，因为如果您将使用 .extbed直接作为 select 或者，它将 select 所有具有此 class 的元素，这将导致同时显示所有克隆和原始实例的隐藏。

注意： 使用以下命令隐藏克隆实例中的 .extbed 部分：

$clone.find('.extbed').hide().find('input').val('');

$(document).ready(function() {
  var genroomid = 2; // change 0 to the number you want to start with

  $(".add-row").click(function() {
    var $clone = $("ul.personal-details").first().clone();
    var $input = $clone.find('#roomid');
    $input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want 
    $clone.find('.extbed').hide().find('input').val('');
    $clone.append("<button type='button' class='remove-row'>-</button>");
    $clone.insertBefore(".add-row");
    genroomid++; // increase id by 1
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;
  });

  var x = (function(extbed) {
    extbed.hide();
    $(".divvisextbed").val('0');
  });

  var y = (function(extbed) {
    extbed.show();
    $(".divvisextbed").val('1');
  });

  // code of display guest info of extra bed
  $(document).on('change', '.extrabed', function() {
    var value2 = $(this).val();
    var toAppend2 = '';
    var $container2 = $(this).siblings('.container2');
    var extbed = $container2.find(".extbed");

    switch (value2) {
      case 'No':
        toAppend2 = x(extbed);
        $container2.html(toAppend2);

        return;
        break;
      case 'Yes':
        toAppend2 = y(extbed);
        $container2.html(toAppend2);
        return;
        break;
      default:
        return;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
  <div class="cloned-removed-div">
    <ul class="personal-details">
      <table class="stretch" border="1">
        <tr>
          <td>
            <label for="extrabed">Extra Bed
                <select class="stretch extrabed"  name="extrabed[]" required="required">
                 <option value="" disabled selected hidden>Extra Bed</option>
                  <option value="No">No</option>
                  <option value="Yes">Yes</option>
                </select>
                <div class="container2">
    
                <div class='extbed' style='display: none;'>
                <input name='divvisextbed[]' class='divvisextbed' type='hidden' value='0'>
                <select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
                  <option value='Mr'>Mr</option>
                  <option value='Ms'>Ms</option>
                  <option value='Child'>Child</option>
                  <option value='Infant'>Infant</option>
                </select>
                <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15'  maxlength='30'  >
                <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'   >
                <input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'  >
                </div>

                </div></label>
          </td>
        </tr>
      </table>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
  </div>
</form>

Answer 2

您不需要在每次点击时都设置 .container2 的 html。您可以只显示或隐藏 #extbed。

$(document).ready(function() {
  var genroomid = 2; // change 0 to the number you want to start with
  $(".add-row").click(function() {
 var $clone = $("ul.personal-details").first().clone();
 var $input = $clone.find('#roomid');
 $input.val(genroomid).attr('genroomid', +genroomid) // change fileid with any string you want 
  $clone.find("#extbed").css("display", "none");
 $clone.append("<button type='button' class='remove-row'>-</button>");
 $clone.insertBefore(".add-row");
 genroomid++; // increase id by 1
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;        
  });
    /*var x =(function(){
  
  $("#extbed").hide();
  $("#divvisextbed").val('0');
  });
 
 var y =(function(){
   $("#extbed").show();
   $("#divvisextbed").val('1');
   
  });*/
  
   // code of display guest info of extra bed
   $(document).on('change', '#extrabed', function() {
   var value2 = $(this).val();
   var toAppend2 = '';
   var $container2 = $(this).siblings('#container2')
    switch (value2) {
      case 'No':
        //toAppend2 = $container2.html(toAppend2);
  //toAppend2 = x;
    
  $($container2).find("#extbed").hide();
  $($container2).find("#divvisextbed").val('0');
  /*
  $(function(){
  $("#prefixextrabed").prop('required',false);
  $("#fnameextrabed").prop('required',false);
  $("#lnameextrabed").prop('required',false);
  $("#nationalityextrabed").prop('required',false);
  
  });
  */
  //$container2.html(toAppend2);
  
        return;
        break;

      case 'Yes':
        //toAppend2 = blkofcod1ext + blkofcod2ext + blkofcod3ext;
  //toAppend2 = y;
     $($container2).find("#extbed").show();
    $($container2).find("#divvisextbed").val('1');
  
  /*
  $(function(){
  $("#prefixextrabed").prop('required',true);
  $("#fnameextrabed").prop('required',true);
  $("#lnameextrabed").prop('required',true);
  $("#nationalityextrabed").prop('required',true);
  
  });
  */
  //$container2.html(toAppend2);
        return;
        break;

      default:
        //toAppend2 = $container2.html(toAppend2);
        return;
    }
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
<div class="cloned-removed-div">
<ul class="personal-details">
<table class="stretch" border="1">
<tr>
<td>
  <label for="extrabed">Extra Bed
                <select class="stretch"  name="extrabed[]" id="extrabed" required="required">
                 <option value="" disabled selected hidden>Extra Bed</option>
     <option value="No">No</option>
     <option value="Yes">Yes</option>
    </select>
                <div id="container2">
    
    <div id='extbed' style='display: none;'>
    <input name='divvisextbed[]' id='divvisextbed' type='hidden' value='0'>
    <select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
     <option value='Mr'>Mr</option>
     <option value='Ms'>Ms</option>
     <option value='Child'>Child</option>
     <option value='Infant'>Infant</option>
    </select>
    <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15'  maxlength='30'  >
    <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'   >
    <input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'  >
    </div>
    
    </div></label>
</td>
</tr>


</table>
         
       
       </ul>
        <button type="button" class="add-row" >+ New Client</button>
       <table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
      </div>
</form>

你也可以测试一下here..

Answer 3

到目前为止所有答案都未能解决问题的第二部分并重置子元素，所以我们开始...

$(document).ready(function() {
  var genroomid = 2;
  $(".add-row").click(function() {
    var $clone = $("ul.personal-details").first().clone();
    var $input = $clone.find('#roomid');
    $input.val(genroomid).attr('genroomid', +genroomid)
    // Reset the values
    $clone.find('#extbed').hide().find('input').val('');
    $clone.append("<button type='button' class='remove-row'>-</button>");
    $clone.insertBefore(".add-row");
    genroomid++;
  });

  $(".cloned-removed-div").on("click", ".remove-row", function() {
    $(this).parent().remove();
    genroomid--;
  });

  // Limit the id search to the element receiving the event
  var x = (function() {

    $("#extbed", this).hide();
    $("#divvisextbed", this).val('0');
  });


  var y = (function() {
    $("#extbed", this).show();
    $("#divvisextbed", this).val('1');

  });

  // code of display guest info of extra bed
  $(document).on('change', '#extrabed', function() {
    var value2 = $(this).val();
    var toAppend2 = '';
    var $container2 = $(this).siblings('#container2')

    switch (value2) {
      case 'No':

        toAppend2 = x;
        $container2.html(toAppend2);

        return;
        break;

      case 'Yes':
        toAppend2 = y;

        $container2.html(toAppend2);
        return;
        break;

      default:
        //toAppend2 = $container2.html(toAppend2);
        return;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form_reservations" method="post" action="2loopadd.php">
  <div class="cloned-removed-div">
    <ul class="personal-details">
      <table class="stretch" border="1">
        <tr>
          <td>
            <label for="extrabed">Extra Bed</label>
            <select class="stretch" name="extrabed[]" id="extrabed" required="required">
              <option value="" disabled selected hidden>Extra Bed</option>
              <option value="No">No</option>
              <option value="Yes">Yes</option>
            </select>
            <div id="container2">
              <div id='extbed' style='display: none;'>
                <input name='divvisextbed[]' id='divvisextbed' type='hidden' value='0'>
                <select class='stretch' name='prefixextrabed[]' id='prefixextrabed'>
                  <option value='Mr'>Mr</option>
                  <option value='Ms'>Ms</option>
                  <option value='Child'>Child</option>
                  <option value='Infant'>Infant</option>
                </select>
                <input name='fnameextrabed[]' id='fnameextrabed' type='text' class='stretch' placeholder='First Name' size='15' maxlength='30'>
                <input name='lnameextrabed[]' id='lnameextrabed' type='text' class='stretch' placeholder='Last Name' size='15' maxlength='30'>
                <input name='nationalityextrabed[]' id='nationalityextrabed' type='text' placeholder='Nationality' class='stretch' size='15' maxlength='30'>
              </div>
            </div>
            </label>
          </td>
        </tr>
      </table>
    </ul>
    <button type="button" class="add-row">+ New Client</button>
    <table width="25%" border="0">
      <tr>
        <input type="submit" name="Submit" value="Insert">
      </tr>
    </table>
  </div>
</form>

如何使功能运行仅与每个克隆的 div 分开，而不是与原始的

How to make function run only with every cloned div separately not with orginal

javascript

jquery

clone

如何使功能 运行 仅与每个克隆的 div 分开，而不是与原始的

How to make function run only with every cloned div separately not with orginal

javascript

jquery

clone

如何使功能运行仅与每个克隆的 div 分开，而不是与原始的