javascript - 在更改功能之外获得正确的选择

Question

我遇到了一个我绝对无法弄清楚的问题。我首先检查哪些复选框被选中。 (运行控制台查看值是否正确)。然后根据选择，将出现一个新的 div 以进行适当的初始选择。单击嵌套复选框后，控制台将显示价格 - “初始选择”。

我的代码片段中的代码完全按照应有的方式工作，但由于某种原因，在我的实际代码中，它无法识别第二个事件处理程序中的正确包$('.check').on('change' ，函数(){。

例如，如果包 1 和 2 是初始选择，则会出现相应的 div，如本例中的 #combined，但一旦选中“现在几点了？ "，console.log() 将仅显示包 1。

如果单独选择包 2，它将显示正确的 div，但然后停在那里... console.log() 将不会显示，因为它没有到达 如果否则。

唯一可以正确工作的选项是单独选择包 1。

因此，既然我能够使代码片段正常工作，我的问题是是否有另一种方法可以确保我的产品更改事件在不同的功能和部分中得到识别......在其自己的更改功能之外。这个有必要吗？我不知道为什么在第二次更改功能中，正确的产品选择没有被识别。

这就是我在控制台中生成的实际代码...

我有太多代码无法发布实际代码，但其结构完全相同。

关于如何在更改功能之外获得实际选择，我有什么想法吗？

var package1 = $('#package1');
var package2 = $('#package2');
$('.product').on('change', function() {
  if (package1.is(':checked') && package2.is(':checked')) {
    console.log("Initial - Package 1 & 2");
    $('#combined').show();
    $('#pack1-details').hide();
    $('#pack2-details').hide();
  } else if (package2.not(':checked') && package1.is(':checked')) {
    console.log("Initial - Package 1");
    $('#combined').hide();
    $('#pack2-details').hide();
    $('#pack1-details').show();
  } else if (package1.not(':checked') && package2.is(':checked')) {
    console.log("Initial - Package 2");
    $('#pack2-details').show();
  }
});
$('.check').on('change', function() {
  if (package1.is(':checked') && package2.is(':checked')) {
    console.log("Price - Package 1 & 2");

  } else {
    if (package1.is(':checked')) {
      console.log("Price - Package 1");
    } else if (package2.is(':checked')) {
      console.log("Price - Package 2");
    }
  }
});

#combined,
#pack1-details,
#pack2-details {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Package 1</label>
<input type="checkbox" class="product" id="package1">
<label>Package 2</label>
<input type="checkbox" class="product" id="package2">
<div id="combined">
  <p>Package 1 & 2</p>
  <div class="check">
    <label>What time is it?</label>
    <input type="checkbox">
  </div>
</div>
<div id="pack1-details">
  <p>Package 1 only</p>
  <div class="check">
    <label>When does Spring start?</label>
    <input type="checkbox">
  </div>
</div>
<div id="pack2-details">
  <p>Package 2 only</p>
  <div class="check">
    <label>Where is Greece?</label>
    <input type="checkbox">
  </div>
</div>

Answer 1

这些变量不在实际代码的范围(全局)内，它们是 .ready 的本地变量。

 jQuery(document).ready(function () {

        // ******** General
        $('#package-section1').show();
        var package1 = $('#package1');
        var package2 = $('#package2');

将其更改为:

var package1;
var package2;

 jQuery(document).ready(function () {

            // ******** General
            $('#package-section1').show();
            package1 = $('#package1');
            package2 = $('#package2');

要访问每个复选框的当前状态，您需要在单击或更改事件时选择它，全局变量是分配复选框时的快照。所以你需要做这样的事情:

 $('.calendar-check').on('change', function () {
       var package1 = $('#package1');
       var package2 = $('#package2');
        //    $('input.example').not(this).prop('checked', false);
       // if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
         if ($('input.calendar-check').not(this).attr('checked', false)) {
            $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked);
            if (package2.prop('checked', false)) {
                $('#pg-preview-wrap').fadeBoolToggle($('.calendar-check:checked').length > 0);
                if ($('.calendar-check:checked').length > 0) {
                    $('html, body').animate({ scrollTop: $('#pg-preview-wrap').offset().top }, 800);
                }
                else if ($('.calendar-check:checked').length == 0) {
                    $('#next2').hide();
                }
            }

...