多个颜色选择器不工作

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

有人能帮我一下吗？

这里是我的代码：

\t 
 
<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> 
 
\t 
 
<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>

<div class="CustomStylesCont" style="overflow:scroll;position:relative;width:50%;height:30%;"> 
 
<h6>Navbar</h6> 
 
<form id="upload" method="post" class="form-horizontal"action="***" enctype="multipart/form-data"> 
 
\t <fieldset> 
 
<div class="colorPicker" > 
 
\t 
 
    <input type="radio" name="hat-color" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red"/> 
 
    <label for="hat-color-red" class="red">red</label> 
 
    <input type="radio" name="hat-color" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange"/> 
 
    <label for="hat-color-orange" class="orange">orange</label> 
 
    <input type="radio" name="hat-color" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow"/> 
 
    <label for="hat-color-yellow" class="yellow">yellow</label> 
 
    <input type="radio" name="hat-color" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green"/> 
 
    <label for="hat-color-green" class="green">green</label> 
 
    <input type="radio" name="hat-color" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue"/> 
 
    <label for="hat-color-blue" class="blue">blue</label> 
 
    <input type="radio" name="hat-color" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo"/> 
 
    <label for="hat-color-indigo" class="indigo">indigo</label> 
 
    <input type="radio" name="hat-color" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet"/> 
 
    <label for="hat-color-violet" class="violet">violet</label> 
 
</div> 
 
<h6>Feed</h6> 
 
<div class="colorPicker2" > 
 
\t 
 
    <input type="radio" name="hat-color2" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red2"/> 
 
    <label for="hat-color-red" class="red2">red</label> 
 
    <input type="radio" name="hat-color2" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange2"/> 
 
    <label for="hat-color-orange" class="orange2">orange</label> 
 
    <input type="radio" name="hat-color2" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow2"/> 
 
    <label for="hat-color-yellow" class="yellow2">yellow</label> 
 
    <input type="radio" name="hat-color2" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green2"/> 
 
    <label for="hat-color-green" class="green2">green</label> 
 
    <input type="radio" name="hat-color2" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue2"/> 
 
    <label for="hat-color-blue" class="blue2">blue</label> 
 
    <input type="radio" name="hat-color2" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo2"/> 
 
    <label for="hat-color-indigo" class="indigo2">indigo</label> 
 
    <input type="radio" name="hat-color2" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet2"/> 
 
    <label for="hat-color-violet" class="violet2">violet</label> 
 
</div> 
 
<h6>Feed Content</h6> 
 
<div class="colorPicker" > 
 
\t 
 
    <input type="radio" name="hat-color3" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red"/> 
 
    <label for="hat-color-red" class="red">red</label> 
 
    <input type="radio" name="hat-color3" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange"/> 
 
    <label for="hat-color-orange" class="orange">orange</label> 
 
    <input type="radio" name="hat-color3" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow"/> 
 
    <label for="hat-color-yellow" class="yellow">yellow</label> 
 
    <input type="radio" name="hat-color3" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green"/> 
 
    <label for="hat-color-green" class="green">green</label> 
 
    <input type="radio" name="hat-color3" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue"/> 
 
    <label for="hat-color-blue" class="blue">blue</label> 
 
    <input type="radio" name="hat-color3" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo"/> 
 
    <label for="hat-color-indigo" class="indigo">indigo</label> 
 
    <input type="radio" name="hat-color3" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet"/> 
 
    <label for="hat-color-violet" class="violet">violet</label> 
 
</div> 
 
\t \t \t \t \t \t \t \t <input type="text" id="usr_id" name="usr_id" class="MsgInputHidden" value="<?= $_SESSION['user']['id'] ?>" /> 
 

 
</div>

来源

2015-09-04 Casper Round

你有多个具有相同ID的元素。这可能无法解决您的问题，但这是不好的做法。 ids应始终是独一无二的。 – Novocaine

谢谢你Novocaine它的工作:) –

好听:-) – Novocaine

你label s为错误（该for属性） - 他们必须在id s表示它们靶向匹配。所以你所有的id都必须是唯一的，这是不正确的，因为你的第二个挑选者与第一个挑选者具有相同的id。在其中的每一个上，更改label[for]和id以反映它们是独特的元素。更好的是，如果你可以在PHP项目中自动执行循环操作！

这些类不会影响到这一切 - 它们都在id s和label s之间的原生浏览器行为中。

来源

2015-09-04 16:30:32

就像@Oliver B说。但最好使用“强类型ID” – siranen

多个颜色选择器不工作

回答

相关问题