如何使用js或jquery在一个页面中使用多个css切换开关

Question

小提琴

我正在尝试制作一个切换开关，当切换时会切换图像的颜色。 我被引导到一个帮助我进行切换的教程，但它都是css，因此没有为每个使用的单个开关创建一个新的类名，我无法重复使用它（我知道）什么是最好的js或者允许我多次使用此切换的jquery。

问题是，当我点击任何一个开关时，它总是只为第一个开关动画。

<div class="switch">
        <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
        <label for="cmn-toggle-7" data-on="Color" data-off="B&W"></label>
</div>

Answer 1

因为你必须为每个复选框相同ID和相同for属性为每个标签，拨动开关都指向第一个复选框。

你需要有一个不同的id和相应for每一个拨动开关。

这是一个更新的小提琴： https ： //jsfiddle.net/757vnetp/1/