如何使用嵌入的文本进行切换？

Question

我正在尝试制作一个内嵌有文本的切换开关。按月和按年定价之间的切换。

这是一张模拟的图片：

​

​

该网站是在React中构建的。我试着使用React-Toggle Pkg

我可以使用这个包完美地获得样式，但我找不到一个好方法来在切换中获得文本。

<Toggle
  name="t-6"
  radius="50px"
  radiusBackground="50px"
  knobRadius="50px"
  width="400px"
  height="55px"
  knobWidth="200px"
  knobHeight="40px"
  onToggle={(e) => console.log("onToggle", e.target)}
/>

Answer 1

也许它还没有实现，看起来并不像它。

不要灰心，只需要一点DOM (更少的代码行，包括组件)和CSS，只需几个无线输入和附带的标签就可以实现这一点。

​

document.querySelectorAll('input[name="pricing"]').forEach(input =>
  input.addEventListener("change", function() {
    document.getElementById('out').innerHTML = `Value: ${this.value}`
  })
)

document.getElementById('out').innerHTML = `Value: monthly`

.pricing-toggle {
  background-color: #3FAED7;
  padding: 14px 5px;
  border-radius: 30px;
  display: inline-block
}

.pricing-toggle [name="pricing"] {
  display: none
}

.pricing-toggle input[type="radio"]+label {
  background-color: #3FAED7;
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
}

.pricing-toggle input[type="radio"]:checked+label {
  background-color: white;
  color: #00008B;
}

<div class="pricing-toggle">
  <input type="radio" id="pricing-toggle-monthly" name="pricing" value="monthly" checked>
  <label class="radio-button" for="pricing-toggle-monthly"> Monthly</label>

  <input type="radio" id="pricing-toggle-annually" name="pricing" value="annually">
  <label class="radio-button" for="pricing-toggle-annually"> Annually</label>
</div>

<div id="out"><div>

​

示例中的js不是必需的，而使用scss时，CSS可以小得多