0

Добрый день. Есть сайт http://sportzakupka.ru/goods/sport_iskusstvenaya_trava/ Если зайти с iphone из браузера safari, то рейтинг можно выставить лишь 2-мя кликами по звезде. Первый имитирует hovaer, второй - click. На ПК все работает как надо.

Вот код

jQuery(document).ready(function(){

jQuery(".rq_a .productRate").hover (
function(){
	jQuery(this).append("<span></span>");
},
function()
{
	jQuery(this).find("span").remove();
});


var rating;

jQuery(".rq_a .productRate").mousemove (
function(e){
	if (!e) e = window.event;
 	if (e.pageX){
	       x = e.pageX;
	        } else if (e.clientX){
	        x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;

	    }
	    var posLeft = 0;
	    var obj = this;
	   while (obj.offsetParent)
	    {
	        posLeft += obj.offsetLeft;
	        obj = obj.offsetParent;
	    }
	    var offsetX = x-posLeft,
			modOffsetX = 5*offsetX%this.offsetWidth;
			rating = parseInt(5*offsetX/this.offsetWidth);

		if(modOffsetX > 0) rating+=1;

		jQuery(this).find("span").eq(0).css("width",rating*30+"px");

});

jQuery(".rq_a .productRate").click (
function()
{
	var vv = $(this).parent().attr( "id" );
	var d = vv.replace('rql', 'rq_');	
	$('#' + d).val(rating);

	rt = rating*20;
	jQuery(this).html("<div style=\"width: " + rt + "%\"></div>");
	return false;
});

});
.productRate {
	background: url(http://sportzakupka.ru/templates/sportzakupka//images/stars.png);
	width: 150px;
	height: 30px;
	position: relative;
}
.productRate div {
	background: url(http://sportzakupka.ru/templates/sportzakupka//images/stars.png) left bottom;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	cursor: pointer;
}
.productRate span {
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: url(http://sportzakupka.ru/templates/sportzakupka//images/stars.png) left center;
	width: 0;
	cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table width="100%" cellspacing="0" cellpadding="0" border="0" id="prodrevsent">

			




           <tbody><tr>
	         <td>
               <b>Внешний вид</b>
	         </td>
	         <td id="rql1" class="rq_a">

	<div class="productRate">
	    <div style="width: 100%"></div>		
	</div>	
	<input name="rq[1]" id="rq_1" type="hidden" class="rfield" value="5">		
	
			 </td>
           </tr>



           <tr>
	         <td>
               <b>Фиксация волокна</b>
	         </td>
	         <td id="rql2" class="rq_a">

	<div class="productRate">
	    <div style="width: 100%"></div>		
	</div>	
	<input name="rq[2]" id="rq_2" type="hidden" class="rfield" value="5">		
	
			 </td>
           </tr>



           <tr>
	         <td>
               <b>Качество основы</b>
	         </td>
	         <td id="rql3" class="rq_a">

	<div class="productRate">
	    <div style="width: 100%"></div>		
	</div>	
	<input name="rq[3]" id="rq_3" type="hidden" class="rfield" value="5">		
	
			 </td>
           </tr>



           <tr>
	         <td>
               <b>УФ стойкость</b>
	         </td>
	         <td id="rql4" class="rq_a">

	<div class="productRate">
	    <div style="width: 100%"></div>		
	</div>	
	<input name="rq[4]" id="rq_4" type="hidden" class="rfield" value="5">		
	
			 </td>
           </tr>



           <tr>
	         <td>
               <b>Удобство монтажа</b>
	         </td>
	         <td id="rql5" class="rq_a">

	<div class="productRate">
	    <div style="width: 100%"></div>		
	</div>	
	<input name="rq[5]" id="rq_5" type="hidden" class="rfield" value="5">		
	
			 </td>
           </tr>



           <tr>
	         <td>
               <b>Цена / качество</b>
	         </td>
	         <td id="rql6" class="rq_a">

	<div class="productRate">
	    <div style="width: 100%"></div>		
	</div>	
	<input name="rq[6]" id="rq_6" type="hidden" class="rfield" value="5">		
	
			 </td>
           </tr>






		   
           <tr>
	         <td valign="top">&nbsp;</td>
	         <td valign="top"><input type="submit" name="send_opinion" id="send_opinion" value="Отправить" class="sub" onclick="save_pop_r_only('157'); return false;"></td>
           </tr>
         </tbody></table>

Помогите сделать так, чтобы на safari также срабатывало с 1-го клика

2
  • modOffsetX = 5*offsetX%this.offsetWidth; это остаток от деления? 18 апр 2017 в 7:32
  • Честно - не знаю. Брал из интернета.
    – igramnet
    18 апр 2017 в 11:16

1 ответ 1

0

Решил вопрос таким образом. Для мобильных телефонов отключил выполнение кода

jQuery(".rq_a .productRate").hover (
function(){
	jQuery(this).append("<span></span>");
},
function()
{
	jQuery(this).find("span").remove();
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.