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

Question

Fiddle

我正在尝试制作一个切换开关，在切换时会耗尽图像的颜色。我被引导到帮助我进行切换的教程，但它都是 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。

这是一个更新的 fiddle :https://jsfiddle.net/757vnetp/1/