有人可以解决使用HTML CSS Vanilla Javscript创建的我的星级评定

问题描述 投票：0回答：1

我已经使用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`;
	}
}
.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;
}
<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>
javascript html css dom
1个回答
0
投票

实际上，您的问题出在这条线的后面：

.star__checked~.star:after {
  opacity: 1;
}

因此将其替换为以下内容，就可以了：

.star__checked.star:after {
  opacity: 1;
}

您的最终代码将如下所示：

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`;
  }
}
.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;
}
<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>
0
投票

经过几次修改：

  • 不需要另一个循环，只需使用e.target

这是工作代码：

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'));
    document.getElementById('helper').classList.remove('star__checked')
    let current = e.target.getAttribute('data-val');
    e.target.previousElementSibling.classList.add('star__checked');
    rating.textContent = `${current}/5`;
  } else {
    stars.forEach((star) => star.classList.remove('star__checked'));
    rating.textContent = `${0}/5`;
  }
}
.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;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="star-container">
  <div id="helper"></div>
  <div class="star" data-val="5"></div>
  <div class="star" data-val="4"></div>
  <div class="star" data-val="3"></div>
  <div class="star" data-val="2"></div>
  <div class="star" data-val="1"></div>
</div>
<h1 class="rating">0/5</h1>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.