javascript - 动态表单选择输入计算无法与 div 正常工作

Question

div 内包含一些由选项控制的选择输入，并且这些选择选项中也有数据值。隐藏和显示 div 工作正常，但有一个非常奇怪的问题，即当我选择第一个选项时，它显示所有选择选项的计算。但是当我删除选择输入周围的所有 div 时，它就可以完美地按照我想要的方式工作。

$('body').on('change', '#visitorcount', function() {
  for (var i = 1; i <= 5; i++) {
    if (i <= $('#visitorcount').val()) {
      $('#person' + i).show();
      $('#country' + i).show();
    } else {
      $('#person' + i).hide();
      $('#country' + i).hide();
    }
  }
});
$('body').on('change', '.ct,#visitorcount', function() {
  var priceforcountry = 0;
  $('.ct').each(function(index, element) {
    if ($(element).parent().css("display") != "none") {
      priceforcountry += +$('option:selected', this).data('fee');
    }
  });
  $('#totalcost').text(priceforcountry);
  //alert(priceforcountry);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
  <div class="col-sm-4 control-label">Citizenship</div>
  <div class="col-sm-8" id="person1">
    <select class="form-control ct" id="country1" name="visitor1">

      <option value="india" data-fee="20">India</option>
      <option value="usa" data-fee="25">USA</option>


    </select>
    <div class="error-message"></div>
  </div>
</div>

<select id="visitorcount" name="visitorcount">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>


<div class="row visitor" id="person2" style="display: none;">
  <div class="col-md-7">
    <div class="form-horizontal">
      <div class="form-group">
        <div class="col-sm-4 control-label">Citizenship</div>
        <div class="col-sm-8">
          <select name="visitor[2][country]" class="form-control ct" id="country2">
            <option value="india" data-fee="20">India</option>
            <option value="usa" data-fee="25">USA</option>


          </select>

        </div>
      </div>

    </div>
  </div>
</div>




<div class="row visitor" id="person3" style="display: none;">
  <div class="col-md-7">
    <div class="form-horizontal">

      <div class="form-group">
        <div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
        <div class="col-sm-8">
          <select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
            <option value="india" data-fee="20">India</option>
            <option value="usa" data-fee="25">USA</option>

          </select>
          <div class="error-message"></div>
        </div>
      </div>

    </div>
  </div>
</div>



<div class="row visitor" id="person4" style="display: none;">
  <div class="col-md-7">
    <div class="form-horizontal">

      <div class="form-group">
        <div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
        <div class="col-sm-8">
          <select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
            <option value="india" data-fee="20">India</option>
            <option value="usa" data-fee="25">USA</option>

          </select>
          <div class="error-message"></div>
        </div>
      </div>

    </div>
  </div>
</div>


<div class="row visitor" id="person5" style="display: none;">
  <div class="col-md-7">
    <div class="form-horizontal">

      <div class="form-group">
        <div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
        <div class="col-sm-8">
          <select name="person[4][country]" class="form-control ct" id="country5" style="display:none">
            <option value="india" data-fee="20">India</option>
            <option value="usa" data-fee="25">USA</option>

          </select>
          <div class="error-message"></div>
        </div>
      </div>

    </div>
  </div>
</div>





<div id="totalcost"></div>

当我们删除选择字段的 div 时，它会按我想要的方式工作。但我希望它像上面的示例一样，因为还有其他字段要显示。

$('body').on('change', '#visitorcount', function() {
            for (var i = 1; i <= 5; i++) {
                if (i <= $('#visitorcount').val()) {
                    $('#person' + i).show();
                    $('#country' + i).show();
                } else {
                    $('#person' + i).hide();
                    $('#country' + i).hide();
                }
            }
        });
        $('body').on('change', '.ct,#visitorcount', function() {
            var priceforcountry = 0;
            $('.ct').each(function(index, element) {
                if ($(element).parent().css("display") != "none") {
                    priceforcountry += +$('option:selected', this).data('fee');
                }
            });
            $('#totalcost').text(priceforcountry);
            //alert(priceforcountry);
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
        <div class="col-sm-4 control-label">Citizenship</div>
        <div class="col-sm-8" id="person1">
            <select class="form-control ct" id="country1" name="visitor1">

                <option value="india" data-fee="20">India</option>
                <option value="usa" data-fee="25">USA</option>


            </select>
            <div class="error-message"></div>
        </div>
    </div>

    <select id="visitorcount" name="visitorcount">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>


    <div class="row visitor" id="person2" style="display: none;">

                        <select name="visitor[2][country]" class="form-control ct" id="country2">
                            <option value="india" data-fee="20">India</option>
                            <option value="usa" data-fee="25">USA</option>


                        </select>
                    
                    </div>
  





    <div class="row visitor" id="person3" style="display: none;">
       
                        <select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
                            <option value="india" data-fee="20">India</option>
                            <option value="usa" data-fee="25">USA</option>

                        </select>
                        <div class="error-message"></div>
                    </div>


    
    
    <div class="row visitor" id="person4" style="display: none;">
                        <select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
                            <option value="india" data-fee="20">India</option>
                            <option value="usa" data-fee="25">USA</option>

                        </select>
                        <div class="error-message"></div>
                    </div>

    
    
    <div class="row visitor" id="person5" style="display: none;">
                        <select name="person[5][country]" class="form-control ct" id="country5" style="display:none">
                            <option value="india" data-fee="20">India</option>
                            <option value="usa" data-fee="25">USA</option>

                        </select>
                        <div class="error-message"></div>
                    </div>
               




    <div id="totalcost"></div>

第一个代码片段有什么问题。为什么 div 会导致这个问题？

Answer 1

不用寻找CSS显示，只需像这样使用$(element).is(':visible')

$('body').on('change', '#visitorcount', function() {
  var val = $('#country1').val();
  for (var i = 1; i <= 5; i++) {
    if (i <= $('#visitorcount').val()) {
      $(`#person${i}`).show();
      //Check to see if this is visible, if not
      //Set the default value and show it.
      if(!$(`#country${i}`).is(':visible')){
        $(`#country${i}`).val(val).show();
      }
    } else {
      $(`#person${i}`).hide();
      $(`#country${i}`).hide();
    }
  }
});
$('body').on('change', '.ct,#visitorcount', function() {
  var priceforcountry = 0;
  $('.ct').each(function(index, element) {
    if ($(element).is(':visible')) {
      priceforcountry += +$('option:selected', this).data('fee');
    }
  });
  $('#totalcost').text(priceforcountry);
  //alert(priceforcountry);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="person1">
  <div class="col-sm-4 control-label">Citizenship</div>
  <div class="col-sm-8" id="person1">
    <select class="form-control ct" id="country1" name="visitor1">

      <option value="india" data-fee="20">India</option>
      <option value="usa" data-fee="25">USA</option>


    </select>
    <div class="error-message"></div>
  </div>
</div>

<select id="visitorcount" name="visitorcount">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>


<div class="row visitor" id="person2" style="display: none;">
  <div class="col-md-7">
    <div class="form-horizontal">
      <div class="form-group">
        <div class="col-sm-4 control-label">Citizenship</div>
        <div class="col-sm-8">
          <select name="visitor[2][country]" class="form-control ct" id="country2">
            <option value="india" data-fee="20">India</option>
            <option value="usa" data-fee="25">USA</option>


          </select>

        </div>
      </div>

    </div>
  </div>
</div>




<div class="row visitor" id="person3" style="display: none;">
  <div class="col-md-7">
    <div class="form-horizontal">

      <div class="form-group">
        <div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
        <div class="col-sm-8">
          <select name="person[3][country]" class="form-control ct" id="country3" style="display:none">
            <option value="india" data-fee="20">India</option>
            <option value="usa" data-fee="25">USA</option>

          </select>
          <div class="error-message"></div>
        </div>
      </div>

    </div>
  </div>
</div>



<div class="row visitor" id="person4" style="display: none;">
  <div class="col-md-7">
    <div class="form-horizontal">

      <div class="form-group">
        <div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
        <div class="col-sm-8">
          <select name="person[4][country]" class="form-control ct" id="country4" style="display:none">
            <option value="india" data-fee="20">India</option>
            <option value="usa" data-fee="25">USA</option>

          </select>
          <div class="error-message"></div>
        </div>
      </div>

    </div>
  </div>
</div>


<div class="row visitor" id="person5" style="display: none;">
  <div class="col-md-7">
    <div class="form-horizontal">

      <div class="form-group">
        <div class="col-sm-4 control-label" data-xtr-key="Citizenship">Citizenship</div>
        <div class="col-sm-8">
          <select name="person[4][country]" class="form-control ct" id="country5" style="display:none">
            <option value="india" data-fee="20">India</option>
            <option value="usa" data-fee="25">USA</option>

          </select>
          <div class="error-message"></div>
        </div>
      </div>

    </div>
  </div>
</div>





<div id="totalcost"></div>