Как заменить красивые иконки - PullRequest
Новая
       16

Как заменить красивые иконки

1 голос
/ 10 июля 2019

Мне нужна пятизвездочная система рейтинга для страницы 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);
    }
});

Я попытался заменить (как вы можете видеть в коде) значок шрифта удивительным на символы Юникода, но это тоже не работает. Я новичок в jQuery, поэтому любая помощь будет высоко ценится.

Я ожидаю увидеть пятизвездочные контуры, которые заполняются, когда пользователь наводит на них курсор. Как только пользователь нажимает на звездочку, все звезды до этой точки должны быть заполнены, а рейтинг отправлен.

Сейчас ничего не появляется там, где должны быть звезды.

1 Ответ

0 голосов
/ 10 июля 2019

Вот как я это делаю, используя псевдоэлементы CSS.

В функции mouseover мы добавляем класс .star-over к значку этого элемента и все значки .prevAll() родного брата. Затем в функции mouseleave мы удаляем эти классы.

При щелчке, если элемент не имеет класса .rate-active, мы добавим к нему .rate-active и добавим .far (сплошная звездочка) к этому элементу и значкам предыдущего элемента. Мы также удаляем .rate-active из всех предыдущих братьев и сестер.

Вот ссылка на мой кодовый блок: 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>
...