更改功能也會影響克隆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>