提问人：Jiří Nováček 提问时间：4/29/2023 最后编辑：AngYCJiří Nováček 更新时间：4/29/2023 访问量：30
为什么我的评级脚本在错误的方向上选择了悬停的 svg？
Why my rating script is selecting hovered svgs in wrong direction?
问：
我有js脚本，用于对一到五个笑脸进行评分。但它以错误的方式选择了悬停的笑脸。如果从右到左，但我希望从左到右。
我想创建一个脚本，在单击笑脸后，该笑脸将用绿色标记该笑脸和所有以前的笑脸。离开鼠标后，它会将颜色变回黑色。如果点击了笑脸，它将永久地将该笑脸和所有以前的笑脸标记为绿色。
你可以帮我吗？谢谢
const emojis = document.querySelectorAll('.emoji');
emojis.forEach((emoji) => {
emoji.addEventListener('mouseenter', () => {
// highlight the current and previous emojis
const current = parseInt(emoji.getAttribute('data-value'));
console.log(current);
for (let i = emojis.length; i > 0; i--) {
if (i <= current) {
document
.querySelector(`[data-value="${i}"] svg path`)
.setAttribute('fill', 'green');
} else {
document
.querySelector(`[data-value="${i}"] svg path`)
.setAttribute('fill', 'black');
}
}
});
emoji.addEventListener('mouseleave', () => {
// restore the default color of the current and previous emojis
const current = parseInt(emoji.getAttribute('data-value'));
emojis.forEach((e) => {
const value = parseInt(e.getAttribute('data-value'));
if (e.classList.contains('selected')) {
e.querySelector('svg path').setAttribute('fill', 'green');
} else if (value <= current) {
e.querySelector('svg path').setAttribute('fill', 'black');
}
});
});
emoji.addEventListener('click', () => {
// select the current emoji and update the previous ones
const current = parseInt(emoji.getAttribute('data-value'));
emojis.forEach((e) => {
const value = parseInt(e.getAttribute('data-value'));
if (value <= current) {
e.classList.add('selected');
e.querySelector('svg path').setAttribute('fill', 'green');
} else {
e.classList.remove('selected');
e.querySelector('svg path').setAttribute('fill', 'black');
}
});
});
});.rating {
display: flex;
justify-content: center;
align-items: center;
}
.rating .emoji {
cursor: pointer;
margin: 5px;
}
.rating .emoji svg path {
fill: black;
}
.rating .emoji.selected svg path,
.rating .emoji:hover svg path,
.rating .emoji:hover ~ .emoji svg path {
fill: green;
}<div class="column">
<div class="rating">
<span class="emoji" data-value="1">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
<span class="emoji" data-value="2">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
<span class="emoji" data-value="3">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
<span class="emoji" data-value="4">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
<span class="emoji" data-value="5">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
</div>
</div>答：
1赞
AngYC
4/29/2023
#1
我建议使用逆向匹配来达到效果。
在 CSS3 中，没有父级同级选择器。但是，您可以向父组件添加默认选择器（在本例中）。之后，通过通用同级组合器的组合，可以使被悬停的元素之后的元素恢复到原始状态。:hover.rating
示例如下：
.column {
display: flex;
justify-content: center;
align-items: center;
}
.rating .emoji {
cursor: pointer;
padding: 5px;
color: black;
}
.rating:hover .emoji {
color: green;
}
.rating .emoji:hover ~ .emoji {
color: black;
}<div class="column">
<div class="rating">
<span class="emoji" data-value="1">
<!-- use the desired SVG icon instead of the text content -->
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
<span class="emoji" data-value="2">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
<span class="emoji" data-value="3">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
<span class="emoji" data-value="4">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
<span class="emoji" data-value="5">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
</div>
</div>
评论