変更機能の外で正しい選択をする

Question

私は決して理解できない問題にぶちかかります。最初に、どのチェックボックスが選択されているかを確認します。 （コンソールを実行して値が正しいことを確認します）。選択に基づいて、適切な初期選択のための新しいdivが表示されます。ネストされたチェックボックスをクリックすると、コンソールに価格 - 「初期選択」が表示されます。

スニペット内のコードは正確に動作しますが、実際のコードで何らかの理由で2番目のイベントハンドラ$('.check').on('change', function() {内の正しいパッケージを認識しません。

たとえば、パッケージ1と2が最初の選択である場合、この場合はのような適切なdivが表示されますが、「何時ですか？」のチェックボックスが選択されると、console.log()にのみ表示されますパッケージ1.

パッケージ2を単独で選択されている場合、それはif elseに取得していないので、console.log()は表示されません...正しいのdivを示すが、そこに停止します。

正しく動作する唯一のオプションは、パッケージ1が単独で選択されている場合です。

私は自分の問題を解決するためにスニペットを得ることができたので、自分の変更機能の外で、製品の変更イベントが異なる機能やセクションで認識されるようにする別の方法があるかどうかです。これは必要ですか？私は第2の変更機能の中で、正しい製品選択がどのように認識されていないのか、他には考えられません。

これは私の実際のコードは、コンソールで生産されたものである...

は、私が実際に投稿するあまりコードを持っているが、それはまったく同じように構成されています。

私は変更機能の外で実際の選択を得るために何ができるのですか？

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

が...