首頁猿問在懸停時突出顯示一組元素

在懸停時突出顯示一組元素

JavaScript

不負相思意 2023-05-11 14:03:17

我正在嘗試根據數據評級標簽在鼠標懸停時為 1 到 5 個元素著色。我正確地獲取了數據，但是發生了幾件事：每次懸停時該功能被訪問 5 次，而不是一次訪問。所有元素都在鼠標進入時獲得顏色，然后所有 5 個元素在鼠標離開時被清除。我能感覺到有一種更簡潔的方法可以做到這一點，尤其是在循環部分。我試圖在這里保持干燥，這肯定不是干燥的。HTML 部分<h2> <i class="far fa-star" data-rating="1">1</i> <i class="far fa-star" data-rating="2">2</i> <i class="far fa-star" data-rating="3">3</i> <i class="far fa-star" data-rating="4">4</i> <i class="far fa-star" data-rating="5">5</i></h2>jQuery 部分：$('[class="far fa-star"]').mouseenter(function() { var target = parseInt($(this).data('rating')); for (i = 0; i < target; i++) { $(this).parent().children(i).css('background-color', 'yellow'); }});$('[class="far fa-star"]').mouseleave(function() { var target = parseInt($(this).data('rating')); for (i = 4; i > target; i--) { $(this).parent().children(i).css('background-color', 'transparent'); }});小提琴在這里 -小提琴

查看完整描述

5 回答

蕭十郎

TA貢獻1815條經驗獲得超13個贊

我認為其他人不明白你真正想要什么，我從你的問題中了解到你想要為你的評級系統提供突出顯示功能，這是一個例子

// using event delegation to get the current mouse hovered star

document.querySelector("h2").onmouseover = function(e) {

// only if the element is of type `<i>`

if(e.target.nodeName === "I") {

// get the rating

var rating = e.target.getAttribute("data-rating");

// looping over the `<i>` elements and color them the correct way

// so only from 0 to the current rating are yellow and the rest

// are black and that makes sure the highlighting is updated even

// if the user keeps moving over the stars

Array.prototype.forEach.call(this.children, (c, i) => c.style.color = i < rating ? "yellow" : "black");

}

// reset the color of all the stars

document.querySelector("h2").onmouseleave = function() {

Array.prototype.forEach.call(this.children, c => c.style.color = "black");

}

<h2>

</h2>

反對回復 2023-05-11

梵蒂岡之花

TA貢獻1900條經驗獲得超5個贊

你可以使用 :hover psudo class 在 css 中使用背景顏色

.yourclass:hover{

background-color: yellow;

}

反對回復 2023-05-11

慕神8447489

TA貢獻1780條經驗獲得超1個贊

我認為這是您要達到的效果：

$('[class="far fa-star"]').mouseenter(function () {

var target = parseInt($(this).data('rating'));

for (i = 0; i < target; i++) {

$(this).parent().children().eq(i).css('background-color', 'yellow');

}

});

$('[class="far fa-star"]').mouseleave(function () {

var target = parseInt($(this).data('rating'));

for (i = 0; i < target; i++) {

$(this).parent().children().eq(i).css('background-color', 'transparent');

}

});

反對回復 2023-05-11

哈士奇WWW

TA貢獻1799條經驗獲得超6個贊

你可以使用 :hover psudo class 在 css 中使用背景顏色

.yourclass:hover{

background-color: yellow;

}

或者使用添加事件監聽器

反對回復 2023-05-11

米脂

TA貢獻1836條經驗獲得超3個贊

看你的代碼，可以用CSS來實現。

反對回復 2023-05-11

5 回答
0 關注
175 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在懸停時突出顯示一組元素

在懸停時突出顯示一組元素

5 回答

添加回答