基於切換開關顯示隱藏 Div

Question

我正在嘗試使切換開關工作，它將根據選中或未選中來顯示/隱藏類。 默認情況下，我想顯示“每年支付”，這樣它就會顯示年價格，還有頁面下方的文本塊。 如果我單擊“按月支付”，它將顯示每月價格，並在頁面下方顯示月度文本。

我試圖遵循一些解決方案，但目前一切都在顯示，並且沒有任何切換。 我怎樣才能解決這個問題？

代碼筆鏈接

function showHide(e) {
  const el = e.target;

  if (el.checked) {
    el.dataset.checked.split(',').forEach(fld    => document.getElementById(fld).parentNode.style.display = 'block');
    el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'none' );
} else {
   el.dataset.checked.split(',').forEach(fld    => document.getElementById(fld).parentNode.style.display = 'none' );
   el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'block');
 }
}

Answer 1

使用 jQuery ：

 $(document).ready(function() { var checkBoxes = $("input[name='toggle']"); toggle(); $("#toggle").click(function() { toggle(); }); function toggle() { if (checkBoxes.prop("checked")) { $('#coreMonthlyText,#coreMonthlyPrice').show('slow'); $('#coreAnnuallyText,#coreAnnuallyPrice').hide('slow'); } else { $('#coreMonthlyText,#coreMonthlyPrice').hide('slow'); $('#coreAnnuallyText,#coreAnnuallyPrice').show('slow'); } } });

 .pricing-box { background: red; padding: 25px } .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; } .toggle-switch { cursor: pointer; background-color: gray; display: inline-block; border: 0; padding-left: 0; padding-right: 0; } .toggle-switch input { display: none; } .toggle-switch, .toggle-switch span { border-radius: 35px; border-style: solid; border-color: transparent; padding-top: .75rem; padding-bottom: .75rem; } .toggle-switch span { border-width: 2px; padding-left: .75rem; padding-right: .75rem; } .toggle-switch input:checked+span+span, .toggle-switch input+span { border-color: #444; background-color: white; } .toggle-switch input+span+span, .toggle-switch input:checked+span { background-color: transparent; border-color: transparent; } #coreMonthlyText, #coreMonthlyPrice, #coreAnnuallyText, #coreAnnuallyPrice { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="pricing-box"> <div class="row"> <div class="column"> <div class="core"> <h2>Core</h2> </div> </div> <div class="column"> <div id="coreAnnuallyPrice" class="coreAnnuallyPrice"> $2,399/yr<br /> Normally $3,588/yr </div> <div id="coreMonthlyPrice" class="coreMonthlyPrice"> $299/pm<br /> first 2 months free </div> </div> </div> <label for="toggle" class="toggle-switch"> <input class="toggle-button" id="toggle" type="checkbox" name="toggle" data-checked="coreAnnuallyPrice,coreAnnuallyText" data-not-checked="coreMonthlyPrice,coreMonthlyText"> <span>pay annually</span> <span>pay monthly</span> </label> </div> <p id="coreAnnuallyText" class="center_text big-text coreAnnuallyText">this is a annual text blurb</p> <p id="coreMonthlyText" class="center_text big-text coreMonthlyText">this is a monthly text blurb.</p>