javascript - 如何替换fontawesome图标
问题描述
我正在处理的 PHP 页面需要一个五星级评级系统。我最初尝试了 MooTools,但页面使用 jQuery 并且它们发生冲突,所以我试图让 jQuery 评级系统工作,但图标没有出现。
我按照网站上的说明进行操作。该网站确实说我可以使用自己的图标而不是字体真棒图标,但我不知道该怎么做。
这是JS文件:
(function($) {
$.fn.stars = function(options) {
var settings = $.extend({
stars: 5,
emptyIcon: '☆',
filledIcon: '★',
color: '#E4AD22',
starClass: '',
value: 0,
text: null,
click: function() {}
}, options);
.
.
}
这是应该出现星星的页面:
echo '<div id="stars" class="click-callback" style="height:34px;width:300px;border:1px solid red;margin: 5px auto;"></div>';
$('#stars').stars({
click: function(i) {
alert(i);
}
});
我尝试用 Unicode 字符替换(如您在代码中看到的)字体真棒图标,但这也不起作用。我是 jQuery 的新手,所以任何帮助将不胜感激。
我希望看到用户将鼠标悬停在五星级轮廓上。一旦用户点击了一颗星,所有到该点的星都应该被填满并提交评级。
现在,星星应该在的地方什么都没有出现。
解决方案
我就是这样做的,使用 css 伪元素。
在mouseover
函数中,我们将类添加.star-over
到该元素的图标和所有.prevAll()
兄弟的图标。然后在mouseleave
函数中我们删除这些类。
单击时,如果元素没有.rate-active
类,我们将添加.rate-active
到它并添加.far
(实心星号)到这个元素和前一个元素的图标。我们还.rate-active
从任何以前的兄弟姐妹中删除。
这是我的 codepen 的链接:https ://codepen.io/Souleste/pen/QXmgrV
$(document).on({
mouseover: function(event) {
var star = $(this).find('.star');
$(this).find('.far').addClass('star-over');
$(this).prevAll().find('.far').addClass('star-over');
},
mouseleave: function(event) {
var star = $(this).find('.star');
$(this).find('.far').removeClass('star-over');
$(this).prevAll().find('.far').removeClass('star-over');
}
}, '.rate');
$(document).on('click', '.rate', function() {
var star = $(this).find('.star');
if (!$(this).hasClass('rate-active')) {
$(this).siblings().find('.star').addClass('far').removeClass('fas rate-active').css('color', '#91a6ff');
star.addClass('rate-active fas').removeClass('far star-over');
$(this).prevAll().find('.star').addClass('fas').removeClass('far star-over').css('color', '#91a6ff');
}
});
.stars {
width: fit-content;
margin: 0 auto;
cursor: pointer;
display: flex;
}
.star {
color: #91a6ff !important;
}
.rate {
height: 50px;
margin-left: -5px;
padding: 5px;
font-size: 25px;
position: relative;
cursor: pointer;
}
.rate input[type="radio"] {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0%);
pointer-events: none;
}
.star-over::after {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 16px;
content: "\f005";
display: inline-block;
color: #d3dcff;
z-index: 1;
position: absolute;
top: 10px;
left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<div class="stars">
<label class="rate">
<input type="radio" name="radio1" id="star1" value="star1">
<div class="face"></div>
<i class="far fa-star star one-star"></i>
</label>
<label class="rate">
<input type="radio" name="radio1" id="star2" value="star2">
<div class="face"></div>
<i class="far fa-star star two-star"></i>
</label>
<label class="rate">
<input type="radio" name="radio1" id="star3" value="star3">
<div class="face"></div>
<i class="far fa-star star three-star"></i>
</label>
<label class="rate">
<input type="radio" name="radio1" id="star4" value="star4">
<div class="face"></div>
<i class="far fa-star star four-star"></i>
</label>
<label class="rate">
<input type="radio" name="radio1" id="star5" value="star5">
<div class="face"></div>
<i class="far fa-star star five-star"></i>
</label>
</div>