更改功能也会影响克隆div

Question

我想显示和隐藏基于更改功能的div ..每当我添加（附加）新的div时变功能都会影响两个div时，它在第一个div上的效果很好。

$(".transport_type").hide();
 $(".rate").hide();
 $(".adult").hide();
 $(".child").hide();
$("body").on("change", "#transport_cat", function(e) {
e.preventDefault();
        if($(this).val() == 'PVT') {
            $('.rate').show(); 
        } else {
            $('.rate').hide(); 
        } 
        if($(this).val() == 'SIC') {
            $('.adult').show(); 
            $('.child').show(); 
        } else {
            $('.adult').hide();
            $('.child').hide();             
        } 
    });

这是一个演示

我只想在选择div的更改上显示hide div而不希望影响另一个div。请帮助我...

Answer 1

几个错误：

• 不要对transport_cat元素使用id属性，因为该元素将被克隆并且具有相同id的多个元素是错误的
• 隐藏/显示div时，也要设置上下文，仅$('.rate').show()会显示所有带有rate类的div。 因此设置上下文。
• 删除$("body").on("change", "#transport_cat", function(e) {当您使用$.on()方法进行克隆时绑定更改事件

我更新了小提琴-https: //jsfiddle.net/swpL5xwp/2/

    <select class="form_line_only form-control className transport_cat" name="tr_cartypes[]">
          <option selected> Select Tour </option>
          <option value="PVT"> PVT </option>
          <option value="SIC"> SIC </option>
        </select>


$("body").on("change", ".transport_cat", function(e) {
  e.preventDefault();
  var $context = $(this).parents('.entry_special_offers');
  if ($(this).val() == 'PVT') {
    $('.rate',$context).show();
  } else {
    $('.rate',$context).hide();
  }
  if ($(this).val() == 'SIC') {
    $('.adult',$context).show();
    $('.child',$context).show();
  } else {
    $('.adult',$context).hide();
    $('.child',$context).hide();
  }
});

Answer 2

您需要研究的几件事，

1. 您需要找到closest entry_special_offers类。
2. 您需要修复当前的实现，在其中找到all包含class费率/成人等因素的元素。 您应该仅在当前entry_special_offers div中找到它们。
3. 另外，您还两次附加了change事件，这不是必需的。

 $(".transport_type").hide(); $(".rate").hide(); $(".adult").hide(); $(".child").hide(); $("body").on("change", "#transport_cat", function(e) { e.preventDefault(); if ($(this).val() == 'PVT') { $(this).closest(".entry_special_offers").find('.rate').show(); } else { $(this).closest(".entry_special_offers").find('.rate').hide(); } if ($(this).val() == 'SIC') { $(this).closest(".entry_special_offers").find('.adult').show(); $(this).closest(".entry_special_offers").find('.child').show(); } else { $(this).closest(".entry_special_offers").find('.adult').hide(); $(this).closest(".entry_special_offers").find('.child').hide(); } }); $(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls_special_offers:first'), currentEntry = $(this).closest('.entry_special_offers'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry_special_offers:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).closest('.entry_special_offers').remove(); e.preventDefault(); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container excursions margin_top"> <!--container hotel --> <div class="controls_special_offers"> <div class="entry_special_offers input-group col-sm-12 col-xs-12 "> <div class="col-sm-2 col-xs-6"> <div class="form-group"> <label for="exampleInputindate">Tour</label> <div class="form-group"> <select class="form_line_only form-control className" name="tr_cartypes[]" id="transport_cat"> <option selected>Select Tour</option> <option value="PVT">PVT</option> <option value="SIC">SIC</option> </select> </div> </div> </div> <div class="col-sm-3 col-xs-6 transport_type"> <div class="form-group"> <label for="exampleInputindate">transportation type</label> <div class="form-group"> <select class="form_line_only form-control " name="tr_seattype[]"> <option selected>Select Type</option> <option>7 Seater</option> <option>15 Seater</option> <option>34 Seater</option> <option>50 Seater</option> </select> </div> </div> </div> <div class="col-sm-2 col-xs-6 rate"> <div class="form-group "> <label for="exampleInputindate">rate</label> <div class="form-group"> <input type="number" name="tc_rates[]" id="tc_rate" class=" form_line_only form-control" placeholder="Enter Price" value="" autocomplete="off"> </div> </div> </div> <div class="col-sm-2 col-xs-6 adult"> <div class="form-group"> <label for="exampleInputindate">Adult</label> <div class="form-group"> <input type="number" name="tc_adults[]" id="tc_adult" class=" form_line_only form-control" placeholder="Adult Price" value="" autocomplete="off"> </div> </div> </div> <div class="col-sm-2 col-xs-6 child"> <div class="form-group"> <label for="exampleInputindate">Child</label> <div class="form-group"> <input type="number" name="tc_childs[]" id="tc_child" class=" form_line_only form-control" placeholder=" Child Price " value="" autocomplete="off"> </div> </div> </div> <span class="input-group-btn day_plan pull-left"> <button class="btn btn-success btn-add add_col" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <br> </div> </div>