如何在一个页面中使用多个CSS切换开关并结合JS或jQuery使用

Question

如何在一个页面中使用多个CSS切换开关并结合JS或jQuery使用

3

我正在尝试制作一个开关，当切换时可以使图像颜色变淡。我被引导到了一个教程，帮助我制作开关，但它全部都是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>

- Shniper

首先，您可以在所有框中重复使用相同的ID，这可能是一个开始。 - crollywood

1

为了澄清@crollywood所说的：拥有多个具有相同id的元素是无效的HTML。这就是类的作用。ID必须是唯一的。 - devlin carnate

我知道这一点，但我不想为每个开关更改ID和动画，因为我有12个开关。我知道使用js有更简单的方法，但我找不到确切的代码。 - Shniper

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff · Accepted Answer

因为每个复选框都具有相同的ID和每个标签都具有相同的“for”属性，所以切换开关全部指向第一个复选框。

您需要为每个切换开关具有不同的ID和对应的“for”。

这里是更新后的fiddle：https://jsfiddle.net/757vnetp/1/。