复制星级评级问题

Question

我只使用html和css实现了一个用户星级评分系统。评级工作得很好，但当我尝试复制它时，我在保存重复条目的评级时遇到了问题。请参阅codepen (https://codepen.io/margin707/pen/mdebMOZ)或以下代码：

​

/*rating1*/

.ratingControl {
  position: relative;
  width: 220px;
  height: 45px;
  user-select: none;
  margin: 0 auto;
}

.ratinginput1 {
  visibility: hidden;
}

.ratingControl-stars {
  position: absolute;
  top: 0;
  width: 40px;
  height: 65px;
  background-image: url('https://i.imgur.com/86OG0nb.png');
  background-size: auto 45px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ratingControl-stars:hover,
.ratingControl-stars:hover~.ratingControl-stars,
.ratinginput1:checked~.ratingControl-stars {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl-stars:active,
.ratingControl-stars:active~.ratingControl-stars,
.ratinginput1:checked~.ratingControl-stars:active {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl-stars--1 {
  left: 10px;
}

.ratingControl-stars--2 {
  left: 50px;
}

.ratingControl-stars--3 {
  left: 90px;
}

.ratingControl-stars--4 {
  left: 130px;
}

.ratingControl-stars--5 {
  left: 170px;
}


/*rating2*/

.ratingControl2 {
  position: relative;
  width: 220px;
  height: 45px;
  user-select: none;
  margin: 0 auto;
}

.ratinginput2 {
  visibility: hidden;
}

.ratingControl2-stars {
  position: absolute;
  top: 0;
  width: 40px;
  height: 65px;
  background-image: url('https://i.imgur.com/86OG0nb.png');
  background-size: auto 45px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ratingControl2-stars:hover,
.ratingControl2-stars:hover~.ratingControl2-stars,
.ratinginput2:checked~.ratingControl2-stars {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl2-stars:active,
.ratingControl2-stars:active~.ratingControl2-stars,
.ratinginput2:checked~.ratingControl2-stars:active {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl2-stars--1 {
  left: 10px;
}

.ratingControl2-stars--2 {
  left: 50px;
}

.ratingControl2-stars--3 {
  left: 90px;
}

.ratingControl2-stars--4 {
  left: 130px;
}

.ratingControl2-stars--5 {
  left: 170px;
}

<div class="ratingControl"><input class="ratinginput1" id="rating-5" name="rating" type="radio" value="5" />
  <label class="filledStars ratingControl-stars ratingControl-stars--5" for="rating-5">5</label>
  <input class="ratinginput1" id="rating-4" name="rating" type="radio" value="4" />
  <label class="filledStars ratingControl-stars ratingControl-stars--4" for="rating-4">4</label>
  <input class="ratinginput1" id="rating-3" name="rating" type="radio" value="3" />
  <label class="filledStars ratingControl-stars ratingControl-stars--3" for="rating-3">3</label>
  <input class="ratinginput1" id="rating-2" name="rating" type="radio" value="2" />
  <label class="filledStars ratingControl-stars ratingControl-stars--2" for="rating-2">2</label>
  <input class="ratinginput1" id="rating-1" name="rating" type="radio" value="1" />
  <label class="filledStars ratingControl-stars ratingControl-stars--1" for="rating-1">1</label></div>
<br>
<div class="ratingControl2"><input class="ratinginput2" id="rating-5" name="rating" type="radio" value="5" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--5" for="rating-5">5</label>
  <input class="ratinginput2" id="rating-4" name="rating" type="radio" value="4" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--4" for="rating-4">4</label>
  <input class="ratinginput2" id="rating-3" name="rating" type="radio" value="3" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--3" for="rating-3">3</label>
  <input class="ratinginput2" id="rating-2" name="rating" type="radio" value="2" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--2" for="rating-2">2</label>
  <input class="ratinginput2" id="rating-1" name="rating" type="radio" value="1" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--1" for="rating-1">1</label></div>

​

我尝试更改重复条目的所有类名，但仍然只会更新原始条目。我怀疑这与~符号有关，但经过几个小时的调试仍无法找到问题的根源。任何帮助都是非常感谢的！

Answer 1

一个文档中不能有多个给定的id值。您需要确保在您的代码中永远不会有重复的id；这是强制。

此外，您所有的单选按钮都具有相同的name属性，这意味着只能选择其中的一个。确保一个组中的所有单选按钮共享该名称，并且每个组使用不同的名称。通常，您可以通过在name属性的末尾添加一个数字并向上计数来轻松实现这一点：

​

/*rating1*/

.ratingControl {
  position: relative;
  width: 220px;
  height: 45px;
  user-select: none;
  margin: 0 auto;
}

.ratinginput1 {
  visibility: hidden;
}

.ratingControl-stars {
  position: absolute;
  top: 0;
  width: 40px;
  height: 65px;
  background-image: url('https://i.imgur.com/86OG0nb.png');
  background-size: auto 45px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ratingControl-stars:hover,
.ratingControl-stars:hover~.ratingControl-stars,
.ratinginput1:checked~.ratingControl-stars {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl-stars:active,
.ratingControl-stars:active~.ratingControl-stars,
.ratinginput1:checked~.ratingControl-stars:active {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl-stars--1 {
  left: 10px;
}

.ratingControl-stars--2 {
  left: 50px;
}

.ratingControl-stars--3 {
  left: 90px;
}

.ratingControl-stars--4 {
  left: 130px;
}

.ratingControl-stars--5 {
  left: 170px;
}


/*rating2*/

.ratingControl2 {
  position: relative;
  width: 220px;
  height: 45px;
  user-select: none;
  margin: 0 auto;
}

.ratinginput2 {
  visibility: hidden;
}

.ratingControl2-stars {
  position: absolute;
  top: 0;
  width: 40px;
  height: 65px;
  background-image: url('https://i.imgur.com/86OG0nb.png');
  background-size: auto 45px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ratingControl2-stars:hover,
.ratingControl2-stars:hover~.ratingControl2-stars,
.ratinginput2:checked~.ratingControl2-stars {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl2-stars:active,
.ratingControl2-stars:active~.ratingControl2-stars,
.ratinginput2:checked~.ratingControl2-stars:active {
  background-image: url('https://i.imgur.com/yGnRfYd.png') !important;
}

.ratingControl2-stars--1 {
  left: 10px;
}

.ratingControl2-stars--2 {
  left: 50px;
}

.ratingControl2-stars--3 {
  left: 90px;
}

.ratingControl2-stars--4 {
  left: 130px;
}

.ratingControl2-stars--5 {
  left: 170px;
}

<div class="ratingControl">
  <input class="ratinginput1" id="group-0-rating-5" name="rating-0" type="radio" value="5" />
  <label class="filledStars ratingControl-stars ratingControl-stars--5" for="group-0-rating-5">5</label>
  <input class="ratinginput1" id="group-0-rating-4" name="rating-0" type="radio" value="4" />
  <label class="filledStars ratingControl-stars ratingControl-stars--4" for="group-0-rating-4">4</label>
  <input class="ratinginput1" id="group-0-rating-3" name="rating-0" type="radio" value="3" />
  <label class="filledStars ratingControl-stars ratingControl-stars--3" for="group-0-rating-3">3</label>
  <input class="ratinginput1" id="group-0-rating-2" name="rating-0" type="radio" value="2" />
  <label class="filledStars ratingControl-stars ratingControl-stars--2" for="group-0-rating-2">2</label>
  <input class="ratinginput1" id="group-0-rating-1" name="rating-0" type="radio" value="1" />
  <label class="filledStars ratingControl-stars ratingControl-stars--1" for="group-0-rating-1">1</label>
</div>
<br>
<div class="ratingControl2">
  <input class="ratinginput2" id="group-1-rating-5" name="rating-1" type="radio" value="5" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--5" for="group-1-rating-5">5</label>
  <input class="ratinginput2" id="group-1-rating-4" name="rating-1" type="radio" value="4" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--4" for="group-1-rating-4">4</label>
  <input class="ratinginput2" id="group-1-rating-3" name="rating-1" type="radio" value="3" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--3" for="group-1-rating-3">3</label>
  <input class="ratinginput2" id="group-1-rating-2" name="rating-1" type="radio" value="2" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--2" for="group-1-rating-2">2</label>
  <input class="ratinginput2" id="group-1-rating-1" name="rating-1" type="radio" value="1" />
  <label class="filledStars ratingControl2-stars ratingControl2-stars--1" for="group-1-rating-1">1</label>
</div>

​

Answer 2

谢谢你的快速回答。它的作用是更改输入的for属性。

对于第二个条目，我将其从：

<div class="ratingControl2"><input class="ratinginput2" id="rating2-5" name="rating2" type="radio" value="6" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--5" for="rating-5">5</label>
<input class="ratinginput2" id="rating2-4" name="rating2" type="radio" value="7" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--4" for="rating-4">4</label>
<input class="ratinginput2" id="rating2-3" name="rating2" type="radio" value="8" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--3" for="rating-3">3</label>
<input class="ratinginput2" id="rating2-2" name="rating2" type="radio" value="9" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--2" for="rating-2">2</label>
<input class="ratinginput2" id="rating2-1" name="rating2" type="radio" value="10" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--1" for="rating-1">1</label></div>

至

<div class="ratingControl2"><input class="ratinginput2" id="rating2-5" name="rating2" type="radio" value="6" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--5" for="rating2-5">5</label>
<input class="ratinginput2" id="rating2-4" name="rating2" type="radio" value="7" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--4" for="rating2-4">4</label>
<input class="ratinginput2" id="rating2-3" name="rating2" type="radio" value="8" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--3" for="rating2-3">3</label>
<input class="ratinginput2" id="rating2-2" name="rating2" type="radio" value="9" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--2" for="rating2-2">2</label>
<input class="ratinginput2" id="rating2-1" name="rating2" type="radio" value="10" />
<label class="filledStars ratingControl2-stars ratingControl2-stars--1" for="rating2-1">1</label></div>

感谢你们的快速帮助！