Question

我遇到了一个我绝对无法弄清楚的问题。我最初检查选择了哪些复选框。（运行控制台以查看值是否正确）。然后根据选择，将出现一个新的div用于适当的初始选择。单击嵌套复选框后，控制台将显示价格 - ＆＃34;初始选择＆＃34;。

我的代码段中的代码完全按预期工作，但由于某些原因，在我的实际代码中，它无法识别第二个事件处理程序$('.check').on('change', function() {中的正确包。

例如，如果包1和包2是初始选择，则会显示相应的div，如本例#combined，但是一旦选中了复选框＆＃34;它几点了？＆＃34;，console.log()将只显示包1。

如果只选择了套餐2，它会显示正确的div，但是然后停在那里...... console.log()赢了，因为它没有到达{{1} }。

唯一可行的选项是仅选择包1。

因为我能够让代码段工作，我的问题是，是否有另一种方法可以确保我的产品更改事件在不同的功能和部分中被识别...在其自身的更改功能之外。这需要吗？我不知道为什么在第二个更改功能中，如何识别正确的产品选择。

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

我有太多的代码来发布实际内容，但结构完全相同。

我可以做些什么来获得更改函数之外的实际选择？

＆＃13;

if else

＆＃13;

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

＆＃13;

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

＆＃13;

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

...

在更改函数之外获取正确的选择

1 个答案: