Почему может показываться отрицательное значение, если двигать по максимуму слева?

Question

[olya_097]

вот
например -0.02
а справа максимум 4.95
https://jsfiddle.net/oc17L42n/1/

Comments

[tema_sun]

Ну так подебажьте. Посмотрите какие значения у e.pageX, obj.offset().left.Ну и т.д.

Answer 1

[sobolay]

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

function move(e, obj) {
	    var summ = 0;
	    var id = obj.next().attr('id').substr(1);
	    var progress = e.pageX - obj.offset().left;

	    var width = obj.width(),
		  leftEdge = obj.offset().left,
		  rightEdge = obj.offset().left + width;

	    if (e.pageX < leftEdge) {
		 progress = 0;
	    } else if (e.pageX >= rightEdge) {
		 progress = obj.width();
	    }
	
	    var rating = progress * 5 / width;

	    $('#param' + id).text(rating.toFixed(2));
	    obj.next().width(progress);
	    $('.stars__count').each(function() {
	      summ += parseFloat($(this).text());
	    });
	  };

и проверку на событие выхода за пределы объекта через правую его границу: если мышь вышла через правую границу, то присваиваем 5

$('.stars__data').on('mouseleave', function(e) {
			var summ = 0;
			var id = $(this).next().attr('id').substr(1);

			var width = $(this).width(),
			      reasonableWidth = width * 0.1,
			      height = $(this).height(),
			      leftEdge = $(this).offset().left,
			      topEdge = $(this).offset().top,
			      bottomEdge = topEdge + height,
			      exitPointX = e.pageX,
			      exitPointY = e.pageY;

			if ( ( exitPointY >= topEdge ) && ( exitPointY <= bottomEdge ) && ( exitPointX > (leftEdge + reasonableWidth) ) ) {
				$('#param' + id).text("5");
				$(this).next().width(width);
				$('.stars__count').each(function() {
					summ += parseFloat($(this).text());
				});
			}
		});

Comments

[olya_097]

sobolay, cпасибо огромное
а что скажете за вариант выше?

[sobolay]

думаю, его автор ошибается в причинах, т.к. растояние между звездочками не влияет на результат: учитывается расстояние от начала блока (obj.offset().left) и расстояние до положения указателя (pageX), а не размер звезды. Предложенный им вариант, хоть и костыльный (имею в виду + 1.4), но может сработать. А может и не сработать при определенных условиях, например в случае быстрого перемещения курсора по звездам.

[olya_097]

sobolay, а
ну да
только что перепроверила
Вы действительно правы

[olya_097]

sobolay, reasonableWidth = width * 0.1,

а можете объяснить зачем мы тут берем ширину и умножаем на 0.1

-----------------------------------------------------------------------------------------------------

$('#param' + id).text("5");
$(this).next().width(width);

и как это работает? для чего 5? для чего следуещий элемент

пожалуйста
извиняюсь, если странный вопрос

[sobolay]

1) это поправка на тот же скоростной выход: если мы оставим просто проверку на пересечение правой границы как exitPointX > (leftEdge +width) или на выход везде правее левой границы exitPointX > leftEdge, мы можем получить ложное срабатывание при некорректном определении браузером exitPointX. Поэтому добавляем костыль в виде 10% ширины как буферную зону вправо от левой границы.
2) $('#param' + id).text("5"); -> хардкодом вписываем строку "5" (можно было и просто 5 цифрой, не имеет значения, только семантика) вместо того, что у нас рассчитал алгоритм в функции move; $(this).next().width(width); -> это аналог obj.next().width(progress) из вашего кода (функции move, 8-я стр в вашем примере), только теперь мы для элемента, на котором сработало событие (div.stars__data), берем следующего за ним сиблинга (элементы с одинаковым родительским блоком, у нас будет p.stars__progress) и в качестве ширины задаем ему значение из переменной width (объявляли ее как var width = $(this).width(). Т.е. делаем p.stars__progress такой же ширины, как div.stars__data. Имя для переменной выбрал не очень удачно, вводит в заблуждение слишком много width ))

[olya_097]

sobolay, если можно еще)

1) а можно было заменить e.pageX на что-то другое?
var progress = e.pageX - obj.offset().left;

2 ) и как понять эти проверки?
если вышли за границы ?

if (e.pageX < leftEdge) {
progress = 0;
} else if (e.pageX >= rightEdge) {
progress = obj.width();
}

[sobolay]

1) подробнее можно почитать например, здесь и здесь - про события, и про координаты здесь
2) границы могут не совпадать для событий и элементов, подробнее неплохо здесь написано

[olya_097]

sobolay, ок, спасибо
А как можно ту переменную назвать? Там где width

[olya_097]

sobolay,
https://codepen.io/Olya097/pen/vYEpNOw

есть нюанс

когда ставится рейтинг, он должен показывать только целые звездочки)
т.е. длина 0% 20% 40% 60% 80% 100%

как это учесть?

[sobolay]

переменные лучше называть так, чтобы по имени было понятно, за что переменная отвечает. В данном случае ее можно было бы назвать как-нибудь вроде starsDataWidth, тогда выражение $(this).next().width(starsDataWidth) станет более читабельным и легким для восприятия

для упрощения реализации второго примера, на вскидку, я бы лучше разделил все поле на отдельные звезды: в большой блок вписываем 5 элементов, в каждый из которых фоном 1 звезду. При наведении мыши на элемент меняем цвет звезды.