那些遇到过的问题

有人可以修复我使用 HTML CSS Vanilla Javscript 创建的星级评分（星级评分只会突出显示以前的元素）

Sum*_*ade 1 html javascript css dom ecmascript-6

我使用 CSS HTML 和 Javascript 创建了一个星级评级应用程序。当我单击星星时，它不会按预期突出显示。假设我单击第三颗星，然后在它突出显示之前只单击两颗星。

我不明白我应该如何处理 css 属性，这将使当前单击的星号突出显示。

let stars = document.querySelectorAll('.star');
document.querySelector('.star-container').addEventListener('click', starRating);
let rating = document.querySelector('.rating');

function starRating(e) {
	if (e.target.classList[0] == 'star') {
		stars.forEach((star) => star.classList.remove('star__checked'));
		for (i = stars.length - 1, j = 0; i >= 0; i--, j++) {
			if (stars[i] !== e.target) {
				stars[i].classList.add('star__checked');
			} else {
				stars[i].classList.add('star__checked');
				rating.textContent = `${j + 1}/5`;
				break;
			}
		}
	} else {
		stars.forEach((star) => star.classList.remove('star__checked'));
		rating.textContent = `${0}/5`;
	}
}
Run Code Online (Sandbox Code Playgroud) 
.star-container {
	display: flex;
	width: 350px;
	flex-direction: row-reverse;
}

.star {
}

.star:before {
	content: '\f005';
	font-family: fontAwesome;
	font-size: 60px;
	position: relative;
	display: block;
	color: pink;
}

.star:after {
	content: '\f005';
	font-family: fontAwesome;
	position: absolute;
	top: 7px;
	font-size: 60px;
	color: gold;
	opacity: 0;
}
.star:hover:after,
.star:hover ~ .star:after {
	opacity: 1;
}

.star__checked ~ .star:after {
	opacity: 1;
}
Run Code Online (Sandbox Code Playgroud) 
<html lang="en">
	<head>

		<link rel="stylesheet" href="./styles.css" />
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
		/>
		<title>Document</title>
	</head>
	<body>
		<div class="star-container">
			<div class="star"></div>
			<div class="star"></div>
			<div class="star"></div>
			<div class="star"></div>
			<div class="star"></div>
		</div>
		<h1 class="rating">0/5</h1>
		<script src="app.js"></script>
	</body>
</html>
Run Code Online (Sandbox Code Playgroud)

SMA*_*KSS 5

实际上你的问题就在这条线后面：

.star__checked~.star:after {
  opacity: 1;
}
Run Code Online (Sandbox Code Playgroud)

这里发生了什么事？

当您应用star__checked到每个所需的元素时，无需为后续同级元素应用样式。~用于一般后继兄弟，因此每当您定义这样的样式时，它只会选择后继元素（因为您使用flex-direction: row-reverse;的元素将从右到左开始，所以它只会突出显示您的后继元素）。因此，您应该只应用opacity: 1;带有star__checkedclass 的 for 元素。

如何修复它？

如果您想修复当前的代码，只需将提到的部分替换为以下内容即可：

.star__checked.star:after {
  opacity: 1;
}
Run Code Online (Sandbox Code Playgroud)

你的最终代码将是这样的：

let stars = document.querySelectorAll('.star');
document.querySelector('.star-container').addEventListener('click', starRating);
let rating = document.querySelector('.rating');

function starRating(e) {
  if (e.target.classList[0] == 'star') {
    stars.forEach((star) => star.classList.remove('star__checked'));
    for (i = stars.length - 1, j = 0; i >= 0; i--, j++) {
      if (stars[i] !== e.target) {
        stars[i].classList.add('star__checked');
      } else if (stars[i] === e.target) {
        stars[i].classList.add('star__checked');
        rating.textContent = `${j + 1}/5`;
        break;
      }
    }
  } else {
    stars.forEach((star) => star.classList.remove('star__checked'));
    rating.textContent = `${0}/5`;
  }
}
Run Code Online (Sandbox Code Playgroud) 
.star-container {
  display: flex;
  width: 350px;
  flex-direction: row-reverse;
}

.star:before {
  content: '\f005';
  font-family: fontAwesome;
  font-size: 60px;
  position: relative;
  display: block;
  color: pink;
}

.star:after {
  content: '\f005';
  font-family: fontAwesome;
  position: absolute;
  top: 7px;
  font-size: 60px;
  color: gold;
  opacity: 0;
}

.star:hover:after,
.star:hover~.star:after {
  opacity: 1;
}

.star__checked.star:after {
  opacity: 1;
}
Run Code Online (Sandbox Code Playgroud) 
<html lang="en">

<head>

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

<body>
  <div class="star-container">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
  </div>
  <h1 class="rating">0/5</h1>
  <script src="app.js"></script>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

但是，如果您正在寻找最佳实践，则必须使用previousElementSibling或indexOf()进行一些进一步的实施和一些魔法，这需要大量工作才能实现，但强烈建议这样做。

我将使用indexOf()，该方法将为我们提供数组中当前选定元素的索引。然后我们像往常一样突出显示它，之后~我们还将选择所有后继兄弟姐妹。但请记住，该类star__checked仅适用于选定的元素。

所以它会是这样的：

const stars = document.querySelectorAll('.star');
document.querySelector('.star-container').addEventListener('click', starRating);
const rating = document.querySelector('.rating');

function starRating(e) {
  stars.forEach((star) => star.classList.remove('star__checked'));
  const i = [...stars].indexOf(e.target);
  if (i > -1) {
    stars[i].classList.add('star__checked');
    rating.textContent = `${stars.length - i}/5`;
  } else {
    star.classList.remove('star__checked');
    rating.textContent = `0/5`;
  }
}
Run Code Online (Sandbox Code Playgroud) 
.star-container {
  display: flex;
  width: 350px;
  flex-direction: row-reverse;
}

.star:before {
  content: '\f005';
  font-family: fontAwesome;
  font-size: 60px;
  position: relative;
  display: block;
  color: pink;
}

.star:after {
  content: '\f005';
  font-family: fontAwesome;
  position: absolute;
  top: 7px;
  font-size: 60px;
  color: gold;
  opacity: 0;
}

.star:hover:after,
.star:hover~.star:after {
  opacity: 1;
}

.star.star__checked~.star:after,
.star.star__checked:after {
  opacity: 1;
}
Run Code Online (Sandbox Code Playgroud) 
<html lang="en">

<head>

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

<body>
  <div class="star-container">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
  </div>
  <h1 class="rating">0/5</h1>
  <script src="app.js"></script>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

597 次

最近记录：

5 年，9 月 前
相关归档
从对象获取具有最高值的键 63
CSS根目录 41
CSS - 在左下角放置一个div 27
使用&middot; 而不是<ul>的子弹 21
如何在Safari 7中禁用自动填充 19
从空格中删除前导空格:pre元素 16
防止将全局 CSS 应用于 Angular 5 中的组件 5
jQuery值属性选择器未返回正确的元素数 4
遇到DOM节点和instanceof问题 2
为什么javascript对象没有map/reduce/filter？ -5
难疑归档
如何从当前的Git工作树中删除本地(未跟踪)文件？ 6561
关闭/隐藏Android软键盘 3641
如何在JavaScript中清空数组？ 2198
找到已安装的npm软件包的版本 2037
何时在JavaScript中使用双引号或单引号？ 1903
如何在不安装Ms Office的情况下在C#中创建Excel(.XLS和.XLSX)文件？ 1804
如何在Python中打印到stderr？ 1246
SQL仅选择列上具有最大值的行 1142
活动已泄露最初添加的窗口 1117
JavaScript中的(内置)方式,用于检查字符串是否为有效数字 1051