每月/每年定价滑块不刷新年度选择

Question

我有 2 天的 HTML、CSS 和 JS 前端开发经验。

经过大量阅读，我已经能够做到以下几点。关键是选Monthly的时候很清爽，选Yearly的时候就没有了，就是一开始就选的

这是我一直在研究的代码：

const switchMonthly = document.getElementById('switchMonthly');
const switchYearly = document.getElementById('switchYearly');
const flexy = document.getElementById('flexy');

switchMonthly.addEventListener('change', e => {
  flexy.classList.toggle('show-annually');
  flexy.classList.toggle('show-monthly');
})
switchYearly.addEventListener('change', e => {
  flexy.classList.toggle('show-monthly');
  flexy.classList.toggle('show-annually');
})

.show-monthly .price-box .monthly {
  display: none;
}

.show-monthly .price-box .annually {
  display: block;
}

.show-annually .price-box .monthly {
  display: block;
}

.show-annually .price-box .annually {
  display: none;
}

<input type="radio" id="switchMonthly" name="switchPlan" value="Monthly" />
<input type="radio" id="switchYearly" name="switchPlan" value="Yearly" checked="checked" />
<label for="switchMonthly">Monthly</label>
<label for="switchYearly">Yearly</label>
<div class="switch-wrapper">
  <div class="switch">
    <div>Monthly</div>
    <div>Yearly</div>
  </div>
</div>
</div>

<div id="flexy" class="flex">
  <div class="price-box">
    <p>
      <span class="monthly">
                         19.99
                    </span>
      <span class="annually">
                         199.99
                    </span>
    </p>
  </div>
</div>

如前所述，问题是在“年度”上它总是显示两种定价选项。

Answer 1

问题是您只是在单选按钮更改时才打开和关闭 classes。但是由于您的 div.flexy 没有起始 class，它只是同时打开和关闭 .show-monthly 和 .show-annually。

只需给您的 .flexy div 一个起始 class 它应该可以工作

编辑： 还要确保为相应的单选按钮提供 checked 属性，以便首先选中正确的按钮。

每月/每年定价滑块不刷新年度选择

Monthly / Yearly pricing slider not refreshing on yearly selection

html

javascript

css

flexbox