多個顏色選擇器不工作

我有三個顏色選擇器，但我已經改變了類，但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

多個顏色選擇器不工作

回答

相關問題