javascript - 使用 javascript/Jquery 在 MouseOver 之后删除元素的颜色

Question

我正在尝试使用 JS 和 jQuery 为我的 Django 元素制作星级评分系统。当鼠标在每颗星星上时，我想改变星星的颜色。

我不希望星形颜色在悬停时持续存在。

我关注了this YouTube 上的教程。在此视频中，它似乎有效。
首选 JavaScript 方法

(function($) {
  "use strict";

  $(document).ready(function() {

    const starone = document.getElementById('star-first')
    const startwo = document.getElementById('star-second')
    const starthird = document.getElementById('star-third')
    const starfourth = document.getElementById('star-fourth')
    const starfifth = document.getElementById('star-fifth')

    const form = document.querySelector('.rate-form')
    const confirmBox = document.getElementById('confirm-score')
    const csrf = document.getElementsByName('csrfmiddlewaretoken')

    const handleStarSelect = (size) => {
      const children = form.children
      for (let i = 0; i < children.length; i++) {
        if (i <= size) {
          children[i].classList.add('checked')
        } else {
          children[i].classList.remove('checked')
        }
      }
    }
    // handleStarSelect(2)

    const handleSelect = (selection) => {
      switch (selection) {
        case 'star-first':
          {
            // starone.classList.add('checked')
            // startwo.classList.remove('checked')
            // starthird.classList.remove('checked')
            // starfourth.classList.remove('checked')
            // starfifth.classList.remove('checked')
            handleStarSelect(1)
            return
          }

        case 'star-second':
          {
            handleStarSelect(2)
            return
          }
        case 'star-third':
          {
            handleStarSelect(3)
            return
          }
        case 'star-fourth':
          {
            handleStarSelect(4)
            return
          }
        case 'star-fifth':
          {
            handleStarSelect(5)
            return
          }

      }

    }

    const arr = [starone, startwo, starthird, starfourth, starfifth]

    arr.forEach(item => item.addEventListener('mouseover', (event) => {
      handleSelect(event.target.id)
    }))

  });
})(jQuery);

.checked {
  color: #f2994a;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <button type="submit" class="fa fa-star fa-lg" id="star-first"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-second"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-third"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-fourth"></button>
    <button type="submit" class="fa fa-star fa-lg" id="star-fifth"></button>
  </form>
  <div id="confirm-score"></div>
</div>

Answer 1

您可以单独使用 CSS 获得相同的结果。不要忘记添加键盘焦点事件。

编辑:再次检查您的问题，我发现您不需要 CSS 解决方案。 CSS 解决方案通常比 JavaScript 解决方案更好，因为一些用户出于安全考虑禁用 JavaScript，而 CSS 可以使某些事情变得更简单。我还将为您添加一个普通的 JavaScript 答案，但我建议只在绝对需要的地方使用 JavaScript。

.stars {
  display: inline flex;
  flex-flow: row-reverse;
}

.star {
  background-color: initial;
  border: initial;
}

.star:hover,
.star:focus,
.star:hover~.star,
.star:focus~.star {
  cursor: pointer;
  color: #f2994a;
}

.star:focus {
  outline: 2px solid #f2994a;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <div class="stars">
      <button type="submit" class="star" id="star-fifth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-fourth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-third"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-second"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-first"><i class="fa fa-star fa-lg"></i></button>
    </div>
  </form>
  <div id="confirm-score"></div>
</div>

JavaScript 解决方案:

document.querySelectorAll('.star').forEach((star) => {
  star.addEventListener('mouseenter', addRating)
  star.addEventListener('focus', addRating)
  star.addEventListener('mouseleave', removeRating)
  star.addEventListener('blur', removeRating)
})

function addRating(event) {
  applyRating(event.target, "add")
}

function removeRating(event) {
  applyRating(event.target, "remove")
}

function applyRating(element, action) {
  document.querySelectorAll(`#${element.id}~.star`).forEach((prevStar) => prevStar.classList[action]('checked'))
  element.classList[action]('checked')
}

.stars {
  display: inline flex;
  flex-flow: row-reverse;
}

.star {
  background-color: initial;
  border: initial;
}

.checked {
  color: #f2994a;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="user-rating">
  <form action="" method="post" class="rate-form">
    {% csrf_token %}
    <div class="stars">
      <button type="submit" class="star" id="star-fifth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-fourth"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-third"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-second"><i class="fa fa-star fa-lg"></i></button>
      <button type="submit" class="star" id="star-first"><i class="fa fa-star fa-lg"></i></button>
    </div>
  </form>
  <div id="confirm-score"></div>
</div>