javascript - 星级系统问题，需要点击两次才能突出显示

Question

我的星级评定系统有问题。星级评定运行良好，但只有当我单击两次时星星才会突出显示。例如，如果我想给 3/5 评分，我需要点击星号 3 两次才能使其突出显示。如何使其只能单击一次？ :/谢谢你!

function firstRating() {
  const star = document.querySelector(".rating").children;

  for (let i = 0; i < star.length; i++) {
    star[i].addEventListener("click", function() {
      for (let j = 0; j < star.length; j++) {
        star[j].classList.remove("fa", "fa-star-o");
        star[j].classList.add("fa", "fa-star");
      }

      for (let j = 0; j <= i; j++) {
        star[j].classList.remove("fa", "fa-star-o");
        star[j].classList.add("fa", "fa-star");
      }
    });
  }
}

function secondRating() {
  const star = document.querySelector(".rating_2").children;

  for (let i = 0; i < star.length; i++) {
    star[i].addEventListener("click", function() {
      for (let j = 0; j < star.length; j++) {
        star[j].classList.remove("fa", "fa-star-o");
        star[j].classList.add("fa", "fa-star");
      }

      for (let j = 0; j <= i; j++) {
        star[j].classList.remove("fa", "fa-star-o");
        star[j].classList.add("fa", "fa-star");
      }
    });
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="form-group" onclick="firstRating()">
  <label class="col-lg-5 col-md-4 control-label" for="firstRating">Experience</label>
  <div class="rating col-lg-7" style="float: right">
    <input type="hidden" name="rating_1" id="rating_1" value="0" />
    <span class="fa fa-star-o" id="rate1"></span>
    <span class="fa fa-star-o" id="rate2"></span>
    <span class="fa fa-star-o" id="rate3"></span>
    <span class="fa fa-star-o" id="rate4"></span>
    <span class="fa fa-star-o" id="rate5"></span>
  </div>
</div>

<div class="form-group" onclick="secondRating()">
  <label class="col-lg-5 col-md-4 control-label" for="secondRating">Speed</label>
  <div class="rating_2 col-lg-7" style="float: right">
    <input type="hidden" name="rating_2" id="rating_2" value="0" />
    <span class="fa fa-star-o" id="ratee1"></span>
    <span class="fa fa-star-o" id="ratee2"></span>
    <span class="fa fa-star-o" id="ratee3"></span>
    <span class="fa fa-star-o" id="ratee4"></span>
    <span class="fa fa-star-o" id="ratee5"></span>
  </div>
</div>

Answer 1

我不确定出了什么问题，但是看看你的代码，我建议进行一些更改。您应该避免重复的函数(例如，firstRating()、secondRating()...) -> 如果您的页面上有 30 个不同的评级怎么办？另外，你的 HTML 很难构建(id=ratee1，ratee2....) - 如果你有 7 颗星，30 个不同的评级怎么办？您可以在另一个页面/项目中重用它吗？

尝试为您需要在页面中重复的内容创建一个 HTML 模板，然后创建一个使用该模板生成某些内容的函数。

这是一个例子:

function initStarRating() {
  var attrName = "starRating",
    list = document.querySelectorAll('input[' + attrName + ']');

  var buildStarGroup = function(el) {

    var parent = el.parentNode,
      class_0 = el.getAttribute("class-0"),
      class_1 = el.getAttribute("class-1"),
      num_stars = el.getAttribute("num-stars");

    el.type = "hidden";
    el.name = el.getAttribute(attrName);
    el.removeAttribute(attrName);

    parent.stars = [];

    for (let j = 1; j <= num_stars; j++) {
      let input = document.createElement("i");
      input.className = j <= el.value ? class_1 : class_0;
      input.value = j;
      parent.appendChild(input);
      parent.stars.push(input);
    }

    parent.onclick = function(e) {
      if (parent.stars.indexOf(e.target) < 0)
        return;
      el.value = e.target.value;
      for (let i = 0; i < parent.stars.length; i++)
        if (i < el.value)
          parent.stars[i].className = class_1;
        else
          parent.stars[i].className = class_0;
    }
  }

  for (let i = 0; i < list.length; i++) {
    buildStarGroup(list[i]);
  }
}
/** initialize stars **/
initStarRating();

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="form-group">
  <label class="col-lg-5 col-md-4 control-label" for="firstRating">Experience</label>
  <div class="rating col-lg-7" style="float: right">
    <input starRating="rating_1" num-stars="5" value="1" class-0="fa fa-star-o" class-1="fa fa-star" />
  </div>
</div>

<div class="form-group">
  <label class="col-lg-5 col-md-4 control-label" for="secondRating">Speed</label>
  <div class="rating col-lg-7" style="float: right">
    <input starRating="rating_2" num-stars="5" value="3" class-0="fa fa-star-o" class-1="fa fa-star" />
  </div>
</div>

我确信这段代码可以改进，但它可以工作，并且应该让您开始构建自己的模板。干杯!