HTML 和 javascript 的星级评定顺序不正确-解网

问：

我尝试使用 HTML 和 JavaScript 创建星级评定系统，但它无法正常运行。

它不是从左到右工作，而是以相反的方向工作 - 从右到左。例如，如果我点击第四颗星星，它将从右到左而不是从左到右着色四颗星星，这样第一颗星星就会保持无色状态。

任何人都可以就如何纠正此问题提出建议吗？

function fillStars(num) {
  for (var i = 1; i <= 5; i++) {
    var star = document.getElementById('star' + i.toString());
    if (i <= num) {
      star.checked = true;
    } else {
      star.checked = false;
    }
  }
}

.rating {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.rating input[type="radio"] {
  display: none;
}

.rating label {
  font-size: 60px;
  margin-right: 10px;
  cursor: pointer;
}

.rating label::before {
  content: "\2606";
  display: inline-block;
  width: 1.1em;
  text-align: center;
}

.rating label.checked::before {
  content: "\2605";
  color: gold;
}

.rating label.checked~label::before {
  content: "\2605";
  color: gold;
}

.rating input[type="radio"]:checked {
  content: "\2605";
  color: gold;
}

.rating input[type="radio"]:checked~label::before {
  content: "\2605";
  color: gold;
}

<div class="form-name">
  <fieldset class="rating">
    <legend>Bewertung:</legend>
    <input type="radio" id="star1" name="rating" value="1" onclick="fillStars(1)" />
    <label for="star1" title="1 Stern"></label>
    <input type="radio" id="star2" name="rating" value="2" onclick="fillStars(2)" />
    <label for="star2" title="2 Sterne"></label>
    <input type="radio" id="star3" name="rating" value="3" onclick="fillStars(3)" />
    <label for="star3" title="3 Sterne"></label>
    <input type="radio" id="star4" name="rating" value="4" onclick="fillStars(4)" />
    <label for="star4" title="4 Sterne"></label>
    <input type="radio" id="star5" name="rating" value="5" onclick="fillStars(5)" />
    <label for="star5" title="5 Sterne"></label>
  </fieldset>
</div>

JavaScript HTML 评级

HTML 和 javascript 的星级评定顺序不正确

Star rating with html and javascript is not working in the right order

评论