Звездный рейтинг с шрифтом “Fontello”

279

20 сентября 2017, 12:05

$('body').on('mousemove', '.blockElem', function(e) {
    var x = e.offsetX==undefined?e.layerX:e.offsetX;
if(x >= 1 && x < 20) {
    $('.elem1').html('&#10031;');
  $('.elem2').html('&#10027;');
  $('.elem3').html('&#10027;');
  $('.elem4').html('&#10027;');
  $('.elem5').html('&#10027;');
  var result = 1;
}
if(x >= 21 && x < 40) {
    $('.elem1').html('&#10031;');
  $('.elem2').html('&#10031;');
  $('.elem3').html('&#10027;');
  $('.elem4').html('&#10027;');
  $('.elem5').html('&#10027;');
  var result = 2;
}
if(x >= 41 && x < 60) {
    $('.elem1').html('&#10031;');
  $('.elem2').html('&#10031;');
  $('.elem3').html('&#10031;');
  $('.elem4').html('&#10027;');
  $('.elem5').html('&#10027;');
  var result = 3;
}
if(x >= 61 && x < 80) {
    $('.elem1').html('&#10031;');
  $('.elem2').html('&#10031;');
  $('.elem3').html('&#10031;');
  $('.elem4').html('&#10031;');
  $('.elem5').html('&#10027;');
  var result = 4;
}
if(x >= 81 && x < 100) {
    $('.elem1').html('&#10031;');
  $('.elem2').html('&#10031;');
  $('.elem3').html('&#10031;');
  $('.elem4').html('&#10031;');
  $('.elem5').html('&#10031;');
  var result = 5;
}
$('.result').html(result);});$('body').on('mouseleave', '.blockElem', function() {
$('.result').html('OUT');});

https://jsfiddle.net/yfp09xt2/ - Набросал рейтинг с html символами

https://test.xn--80akhmlofgv.net/new_Real_Estate/test - с шрифтом "Fontello"

При использовании "Fontello" mouseleave не срабатывает. Помогите разобраться.

Answer 1

Звездочки закрывают общий блок от нормального события mouseleave. Поскольку вы их все равно не используйте (их события), просто отключите их от взаимодействия с мышью:

.starRating span {
    pointer-events: none;
}

Answer 2

меняйте class а не html

$(document).ready(function() { 
  $('body').on('mousemove', '#starRating', function(e) { 
    var x = e.offsetX == undefined ? e.layerX : e.offsetX; 
 
    var dataOldRating = $('#starRating').data('oldRating'); 
    if (dataOldRating === 'no') { 
      var oldRating = $('#starRating').html(); 
      $('#starRating').data('oldRating', oldRating); 
    } 
    var rating = 0; 
 
    if (x >= 1 && x < 11) { 
      $('.starRating1 i').attr('class', "icon-star-half-alt"); 
      $('.starRating2 i').attr('class', "icon-star-empty-1"); 
      $('.starRating3 i').attr('class', "icon-star-empty-1"); 
      $('.starRating4 i').attr('class', "icon-star-empty-1"); 
      $('.starRating5 i').attr('class', "icon-star-empty-1"); 
      rating = 0.5; 
    } 
 
    if (x >= 11 && x < 23) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-empty-1"); 
      $('.starRating3 i').attr('class', "icon-star-empty-1"); 
      $('.starRating4 i').attr('class', "icon-star-empty-1"); 
      $('.starRating5 i').attr('class', "icon-star-empty-1"); 
      rating = 1; 
    } 
 
    if (x >= 23 && x < 34) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-half-alt"); 
      $('.starRating3 i').attr('class', "icon-star-empty-1"); 
      $('.starRating4 i').attr('class', "icon-star-empty-1"); 
      $('.starRating5 i').attr('class', "icon-star-empty-1"); 
      rating = 1.5; 
    } 
 
    if (x >= 34 && x < 45) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-3"); 
      $('.starRating3 i').attr('class', "icon-star-empty-1"); 
      $('.starRating4 i').attr('class', "icon-star-empty-1"); 
      $('.starRating5 i').attr('class', "icon-star-empty-1"); 
      rating = 2; 
    } 
 
    if (x >= 45 && x < 56) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-3"); 
      $('.starRating3 i').attr('class', "icon-star-half-alt"); 
      $('.starRating4 i').attr('class', "icon-star-empty-1"); 
      $('.starRating5 i').attr('class', "icon-star-empty-1"); 
      rating = 2.5; 
    } 
 
    if (x >= 56 && x < 67) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-3"); 
      $('.starRating3 i').attr('class', "icon-star-3"); 
      $('.starRating4 i').attr('class', "icon-star-empty-1"); 
      $('.starRating5 i').attr('class', "icon-star-empty-1"); 
      rating = 3; 
    } 
 
    if (x >= 67 && x < 78) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-3"); 
      $('.starRating3 i').attr('class', "icon-star-3"); 
      $('.starRating4 i').attr('class', "icon-star-half-alt"); 
      $('.starRating5 i').attr('class', "icon-star-empty-1"); 
      rating = 3.5; 
    } 
 
    if (x >= 78 && x < 89) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-3"); 
      $('.starRating3 i').attr('class', "icon-star-3"); 
      $('.starRating4 i').attr('class', "icon-star-3"); 
      $('.starRating5 i').attr('class', "icon-star-empty-1"); 
      rating = 4; 
    } 
 
    if (x >= 89 && x < 100) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-3"); 
      $('.starRating3 i').attr('class', "icon-star-3"); 
      $('.starRating4 i').attr('class', "icon-star-3"); 
      $('.starRating5 i').attr('class', "icon-star-half-alt"); 
      rating = 4.5; 
    } 
 
    if (x >= 100 && x <= 112) { 
      $('.starRating1 i').attr('class', "icon-star-3"); 
      $('.starRating2 i').attr('class', "icon-star-3"); 
      $('.starRating3 i').attr('class', "icon-star-3"); 
      $('.starRating4 i').attr('class', "icon-star-3"); 
      $('.starRating5 i').attr('class', "icon-star-3"); 
      rating = 5; 
    } 
 
    $('#ColRating').html(rating); 
  }); 
 
 
  $('body').on('mouseleave', '#starRating', function(e) { 
    //var oldRating = $('#starRating').data('oldRating'); 
    //$('#starRating').html(oldRating); 
    $('#ColRating').html("OUT"); 
  }); 
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Появление фотографий после их загрузки

Еесть фотки на сайте, которые динамически подгружаются и скорость загрузки зависит от интернета, фото стоят изначально в jQuery('img')css({'opacity':...

197

CSS

Поменять стиль кнопки “читать далее… ” на wordpress

Есть сайт wordpress на теме Clean commerceХочу поставить на кнопку "читать далее

243

CSS

Анимированный бордер на css или js?

Когда верстал сайт ставил нижние границы на серый цвет и переход на 03s,при наведении (hover) менял границы на синий цвет

298

MySQL

Как понять какая база подходит для определенных данных и работы с ними?

Допустим есть 3 типа БД: реляционная, документоориентированная, ключ-значениеНапример: PostgreSQL, Mongo , Redis

173