javascript - 通过修改 Ryan Fait 的代码来设置多个单选按钮的样式

Question

我非常喜欢使用 Ryan Fait 的“样式化复选框和单选按钮”代码
click here for demo

我遇到了一些障碍。我正在创建一个 Ryan 代码有两种用途的调查表。第一次使用时使用大的快乐按钮，询问您对所问的问题是快乐、无动于衷还是悲伤。第二种用途是“从 0 到 10 给你的体验打分”，我需要使用一个不同的、更小的单选按钮图形。

我收集到不同单选按钮的每个实例都需要自己的 CSS 和类名，但我尝试自己修改 Ryan 的代码并且 1) 我不是爱因斯坦 2) 我在急于完成其他一些元素。我试图实现这一点的方法是在每个子句中放置一个 IF 语句(移动背景位置)以查找类名(类=“hugeButton”与类=“teenyWeeny”)。我要么得到以下两个结果之一:

• 原来的 LARGE 按钮甚至都不再显示了。
• 当你点击任何按钮时，它们就会消失

有没有人知道我必须如何将 Ryan 的代码修改为:

1. 允许多种图形和尺寸
2. 检查以确保它只影响指定的类名元素
3. 帮我洗衣服，给我做个三明治

如果它做不到#3，我会接受的。

Answer 1

我会说下载脚本的另一个副本。在一个 js 文件中，将单词“styled”的所有实例替换为您的第一个类名，在第二个 js 文件中，将单词“styled”的所有实例替换为您的第二个类名。根据您要使用的图标，根据需要调整文件中的图标高度。然后像你说的那样，创建单独的 CSS 类。我认为，复选框/单选按钮不应相互影响，因为它们使用具有不同属性的不同脚本。