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

这是一个demo here

我想只做改变时显示隐藏div，选择div不想影响另一个div.please帮助我......

Answer 1

几个错误：

不要对id元素使用transport_cat属性，因为此元素正在克隆，并且具有相同ID的多个元素错误
在隐藏/显示div时，也设置上下文，只需$('.rate').show()将显示所有带速率等级的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

您需要了解的一些事情，

您需要找到closest entry_special_offers类。
您需要修复当前的实施内容，找到all费率/成人和其他class元素。您应该只使用当前entry_special_offers div找到它们。
您还附加了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>

关于更改功能也会影响克隆div

2 个答案: