Question

我有三个颜色选择器，但我已经更改了类，但2nd和3rd选择器只更改1st上的选择，我想如果它是{ {1}}更改选择会更容易。因此，复制脚本并更改三个选择器中每个选择器的JavaScript。但是我从ID获取了这个并且它只有一个颜色选择器但是当我添加更多甚至更改类时它仍然只选择codepen。

有人可以帮我一把吗？

这是我的代码：

1st

	
<style class="cp-pen-styles">* {
  box-sizing: border-box;
}

.colorPicker {
  margin-top: 1em;
  font-size: 0.875em;
  text-align: center;
  display: inline-table;
  width: 100%;
  max-width: 40em;
  background: #fff;
  padding: 2px;
  border-radius: 0.35em;
  box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.15);
}
.colorPicker label {
  -webkit-tap-highlight-color: rgba(255,255,255,0.5);
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
  display: table-cell;
  cursor: pointer;
  vertical-align: middle;
  padding: 0.5em 1em;
  text-transform: capitalize;
  letter-spacing: -0.5em;
  color: transparent;
  opacity: 0.35;
  width: 1%;
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
}
.colorPicker label.red {
  background-color: #ff3e05;
  -webkit-tap-highlight-color: #ff3e05;
}
.colorPicker label.orange {
  background-color: #ff8d05;
  -webkit-tap-highlight-color: #ff8d05;
}
.colorPicker label.yellow {
  background-color: #ecca05;
  -webkit-tap-highlight-color: #ecca05;
}
.colorPicker label.green {
  background-color: #40af04;
  -webkit-tap-highlight-color: #40af04;
}
.colorPicker label.blue {
  background-color: #057fff;
  -webkit-tap-highlight-color: #057fff;
}
.colorPicker label.indigo {
  background-color: #7500ca;
  -webkit-tap-highlight-color: #7500ca;
}
.colorPicker label.violet {
  background-color: #cc6fcc;
  -webkit-tap-highlight-color: #cc6fcc;
}
.colorPicker label:first-of-type {
  border-radius: 0.25em 0 0 0.25em;
}
.colorPicker label:last-of-type {
  border-radius: 0 0.25em 0.25em 0;
}
.colorPicker label:hover {
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}
.colorPicker input {
  display: none;
}
.colorPicker input:checked + label {
  width: 90%;
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}

</style>
	
<style class="cp-pen-styles">
.colorPicker2 {
  margin-top: 1em;
  font-size: 0.875em;
  text-align: center;
  display: inline-table;
  width: 100%;
  max-width: 40em;
  background: #fff;
  padding: 2px;
  border-radius: 0.35em;
  box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.15);
}
.colorPicker2 label {
  -webkit-tap-highlight-color: rgba(255,255,255,0.5);
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
  display: table-cell;
  cursor: pointer;
  vertical-align: middle;
  padding: 0.5em 1em;
  text-transform: capitalize;
  letter-spacing: -0.5em;
  color: transparent;
  opacity: 0.35;
  width: 1%;
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
}
.colorPicker2 label.red2 {
  background-color: #ff3e05;
  -webkit-tap-highlight-color: #ff3e05;
}
.colorPicker2 label.orange2 {
  background-color: #ff8d05;
  -webkit-tap-highlight-color: #ff8d05;
}
.colorPicker2 label.yellow2 {
  background-color: #ecca05;
  -webkit-tap-highlight-color: #ecca05;
}
.colorPicker2 label.green2 {
  background-color: #40af04;
  -webkit-tap-highlight-color: #40af04;
}
.colorPicker2 label.blue2 {
  background-color: #057fff;
  -webkit-tap-highlight-color: #057fff;
}
.colorPicker2 label.indigo2 {
  background-color: #7500ca;
  -webkit-tap-highlight-color: #7500ca;
}
.colorPicker2 label.violet2 {
  background-color: #cc6fcc;
  -webkit-tap-highlight-color: #cc6fcc;
}
.colorPicker2 label:first-of-type {
  border-radius: 0.25em 0 0 0.25em;
}
.colorPicker2 label:last-of-type {
  border-radius: 0 0.25em 0.25em 0;
}
.colorPicker2 label:hover {
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}
.colorPicker2 input {
  display: none;
}
.colorPicker2 input:checked + label {
  width: 90%;
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}

</style>

Answer 1

您的label错误（for属性） - 它们必须与他们定位的id匹配。因此，您的所有id必须是唯一的，但事实并非如此，因为您的第二个选择器与第一个选择器具有相同的id s。在每个上，更改label[for]和id以反映其独特元素。如果你可以在PHP项目中使用循环自动执行此操作，那就更好了！

这些课程不会影响这一点 - 它只是在id和label之间的原生浏览器行为中。

多个颜色选择器不起作用

1 个答案: