时间戳

首页 > 解决方案 > JQuery - 如何更改不同切换按钮的颜色？

javascript - JQuery - 如何更改不同切换按钮的颜色？

问题描述

我有 3 个不同的切换按钮，想了解如何使用 id (cb1, cb2, cb3) 更改 3 个切换按钮的背景颜色，以便每个按钮（选中时）具有不同的颜色。让我知道如何使用 jquery 来完成它？

<style>
input#cb1:checked+.slider {
  background-color: #2196F3;
}

input#cb2:checked+.slider {
  background-color: #96F321;
}

input#cb3:checked+.slider {
  background-color: #F32196;
}
</style>

<label class="switch">
  <input type="checkbox" id="cb1">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" id="cb2">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" id="cb3">
  <span class="slider"></span>
</label>

下面的代码就是答案。

$("input#cb1:checked+.slider").css("background-color","yellow");
$("input#cb2:checked+.slider").css("background-color","brown");
$("input#cb3:checked+.slider").css("background-color","purple");

标签： javascriptjqueryhtml

解决方案

在您的 css 中，您可以通过其 ID 引用元素，例如

#cb1 + .slider

如果你想保留输入部分，它是element#id，例如input#cb1

更新的片段示例：

input:checked+.slider {
  background-color: #2196F3;
}

.slider {
  background-color: black;
}

input#cb1:checked+.slider {
  background-color: #2196F3;
}

input#cb2:checked+.slider {
  background-color: #96F321;
}

input#cb3:checked+.slider {
  background-color: #F32196;
}
<label class="switch">
  <input type="checkbox" id="cb1">
  <span class="slider">&nbsp;&nbsp;</span>
</label>

<label class="switch">
  <input type="checkbox" id="cb2">
  <span class="slider">&nbsp;&nbsp;</span>
</label>

<label class="switch">
  <input type="checkbox" id="cb3">
  <span class="slider">&nbsp;&nbsp;</span>
</label>

推荐阅读