我有一些简单的投票机制，所有魔术师都通过 jQuery 提供，但它现在工作正常只是因为我在 CSS 中有 !important 声明:.rating-hover { background -颜色:黄色!重要； }。如何删除此声明并仅通过 jQuery 解决此问题？
所以问题是如何在悬停时始终显示黄色背景色，即使我们选择了一些具有绿色背景色的元素也是如此。
附言我知道如何通过更改 html/css 来完成所有这些，但问题是如何仅通过添加特定的 jQuery 代码来完成。
这就是全部代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {
font-family: Verdana;
}
h3 {
color: darkblue;
}
.rating-circle {
height: 2em;
width: 2em;
border: .1em solid black;
border-radius: 1.1em;
display: inline-block;
margin: 0;
padding: .1em;
}
.rating-hover {
background-color: yellow !important;
}
.rating-chosen {
background-color: green;
}
</style>
</head>
<body>
<h3>Rate this</h3>
<div id="rating-container">
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
// Frequently used variable:
var item = $('.rating-circle');
// Rating-hover effects:
item.hover(function () {
$(this).prevAll(item).andSelf().toggleClass('rating-hover');
});
// Rating-chosen effects:
var chosen = item.click(function () {
chosen.removeClass('rating-chosen');
$(this).prevAll(item).andSelf().addClass('rating-chosen');
});
});
</script>
</body>
</html>
和here是 CodePen 中的 Playground 。
最佳答案
使用类是处理显示的好方法。我不会改变这一点。您可以将选择存储在 data- 属性中并以这种方式处理它。
fiddle :http://jsfiddle.net/f9ocusxy/
$(function () {
// Frequently used variable:
var item = $('.rating-circle');
var container = $('#rating-container');
// Rating-hover effects:
item.hover(function () {
$(this).prevAll(item).andSelf().toggleClass('rating-hover');
});
container.on('mouseout', function () {
item.each(function () {
if ($(this).prop('data-chosen') == '1') {
$(this).addClass('rating-chosen');
}
});
});
container.on('mouseover', function () {
item.removeClass('rating-chosen');
});
// Rating-chosen effects:
var chosen = item.click(function () {
chosen.removeClass('rating-chosen').prop('data-chosen', '0');
$(this).prevAll(item).andSelf().addClass('rating-chosen').prop('data-chosen', '1');
});
}); body {
font-family: Verdana;
}
h3 {
color: darkblue;
}
.rating-circle {
height: 2em;
width: 2em;
border: .1em solid black;
border-radius: 1.1em;
display: inline-block;
margin: 0;
padding: .1em;
}
.rating-hover {
background-color: yellow !important;
}
.rating-chosen {
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Rate this</h3>
<div id="rating-container">
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
<div class="rating-circle"></div>
</div>关于jquery - 覆盖样式，只需要jQuery解决，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32668962/