<分区>
标签 javascript jquery css
我想缩短我的代码。你可以看到下面的代码，我为 addClass、removeClass 使用了很多函数。但它没有用。可以在一个悬停功能中完成我的工作吗？如果是，有人可以帮助我吗？
HTML
<div class="GvStarContainer">
<!--Style 1 STARTED-->
<div class="GvStarTmp">
<div class="margi-star">
<div class="rate-ex1-cnt">
<div id="1" class="star star-one-1 rate-btn star-one"></div>
<div id="2" class="star star-one-2 rate-btn star-one"></div>
<div id="3" class="star star-one-3 rate-btn star-one"></div>
<div id="4" class="star star-one-4 rate-btn star-one"></div>
<div id="5" class="star star-one-5 rate-btn star-one"></div>
</div>
</div>
</div>
<!--Style 1 FINISHED-->
<!--Style 2 STARTED-->
<div class="GvStarTmp">
<div class="margi-star">
<div class="rate-ex2-cnt">
<div id="1" class="star star-two-1 rate-btn star-two"></div>
<div id="2" class="star star-two-2 rate-btn star-two"></div>
<div id="3" class="star star-two-3 rate-btn star-two"></div>
<div id="4" class="star star-two-4 rate-btn star-two"></div>
<div id="5" class="star star-two-5 rate-btn star-two"></div>
</div>
</div>
</div>
<!--Style 2 FINISHED-->
</div>
JS
$(document).ready(function() {
$('.star-one').hover(function() {
$('.star-one').removeClass('rate-btn-hover');
var therate = $(this).attr('id');
for (var i = therate; i >= 0; i--) {
$('.star-one-' + i).addClass('rate-btn-hover');
};
});
// Red
$('.star-two').hover(function() {
$('.star-two').removeClass('rate-btn-hover');
var therate = $(this).attr('id');
for (var i = therate; i >= 0; i--) {
$('.star-two-' + i).addClass('rate-btn-hover');
};
});
// Pink
$('.star-tree').hover(function() {
$('.star-tree').removeClass('rate-btn-hover');
var therate = $(this).attr('id');
for (var i = therate; i >= 0; i--) {
$('.star-tree-' + i).addClass('rate-btn-hover');
};
});
});
这是我的演示页面: DEMO
我仍然试图从这个演示中缩短我的代码，但它不像第一个演示那样工作。 <强> DEMO2
最佳答案
我要说的一件事是，您可以使用 toggleClass() 而不是结合使用添加和删除。这会稍微缩短您的代码。此外，尽量与使用单引号或双引号保持一致。选择一种风格并随心所欲:)
$(document).ready(function() {
var prevStars = $(this).prevAll();
var nextStars = $(this).nextAll();
$(".star").hover(
function() {
var prevStars = $(this).prevAll();
prevStars.toggleClass("rate-btn-hover");
}
);
$("body").on("click", ".star", function() {
var prevStars = $(this).prevAll().addBack();
prevStars.toggleClass('rate-btn-active');
});
});
关于javascript - 我如何在一行函数中执行我的 jquery 悬停函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40362032/