Как заменить иконки 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);
}
});
Я попытался заменить (как вы можете видеть в коде) значок шрифта awesome символами Unicode, но это тоже не работает. Я новичок в jQuery, поэтому любая помощь будет очень признательна.
Я ожидаю увидеть контуры с пятью звездочками, которые заполняются по мере того, как пользователь наводит на них курсор мыши. Как только пользователь нажимает на звезду, все звезды до этого момента должны быть заполнены, а рейтинг отправлен.
Сейчас ничего не появляется там, где должны быть звезды.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот как я это делаю, используя псевдоэлементы 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>
Я предполагаю, что emptyIcon: и fillIcon: при использовании значков шрифта awesome ссылаются на имена в файле awesome .css шрифта... поэтому, чтобы использовать ваш собственный, нужно добавить свой собственный custom.css , добавить логику для значки, а затем ссылаться на них из emptyIcon и fillIcon