Форум Сайтостроение Веб-строительство

Конфликт jQuery: 3 магических счетчика, 2 из которых отказываются работать

12
Einstein02
На сайте с 10.06.2009
Offline
164
Einstein02
857

Делаю 3 накручивающиеся счетчика, которые конфликтуют между собой. Работает только последний - на данный момент 3-ий. Если удалить его - будет работать второй, удалить второй - будет работать первый. Подскажите, пожалуйста, как сделать так, чтобы работали все 3. 

<div id="bx_651765591_80" >



<div style="text-align: center;">

Проданных объектов:<br>

<img src="/numbers_2_1.png" alt="">



	<div class="counter11" data-num="800" style="font-size:40px">

		 1	</div>

</div>





 

<script type="text/javascript">





$('#itimer').hover(function() {                





var time = 1;

$('.counter11').each(function(){

var i = '1';



      num = $(this).data('num'),

      step = 10 * time / num,

      that = $(this),

      int = setInterval(function(){

        if (i <= num) {

          that.html(i);

        }

        else {

          clearInterval(int);

        }

        i++;

      },step);



});

$('.counter11').removeClass();







 }, function() {

  // обработчик отведения мыши

});



</script>









	</div>



		<div id="bx_651765591_82" >



<div style="text-align: center;">

Проданных объектов:<br>

<img src="/numbers_2_1.png" alt="">



	<div class="counter2" data-num="100" style="font-size:40px">

		 1	</div>

</div>





 

<script type="text/javascript">





$('#itimer').hover(function() {                





var time = 1;

$('.counter2').each(function(){

var i = '1';



      num = $(this).data('num'),

      step = 10 * time / num,

      that = $(this),

      int = setInterval(function(){

        if (i <= num) {

          that.html(i);

        }

        else {

          clearInterval(int);

        }

        i++;

      },step);



});

$('.counter2').removeClass();







 }, function() {

  // обработчик отведения мыши

});



</script>









	</div>



		<div id="bx_651765591_83" >



<div style="text-align: center;">

Проданных объектов:<br>

<img src="/numbers_2_1.png" alt="">



	<div class="counter3" data-num="800" style="font-size:40px">

		 1	</div>

</div>





 

<script type="text/javascript">





$('#itimer').hover(function() {                





var time = 1;

$('.counter3').each(function(){

var i = '1';



      num = $(this).data('num'),

      step = 10 * time / num,

      that = $(this),

      int = setInterval(function(){

        if (i <= num) {

          that.html(i);

        }

        else {

          clearInterval(int);

        }

        i++;

      },step);



});

$('.counter3').removeClass();







 }, function() {

  // обработчик отведения мыши

});



</script>









	</div>
Продвиженто (https://prodvizhento.com/) – агентство по созданию семантических ядер. SEO аудиты недорого Ссылка на скайп (skype:yablokoed?chat) | почта: mail[собака]prodvizhento.com | icq: 606-255-5три2
edogs software
На сайте с 15.12.2005
Offline
775
edogs software
#1

hover - один обработчик на id.

У Вас - несколько висят на одном itimer. Задали 1-ый, потом перезаписали вторым, потом перезаписали третьим. Вот и выполняется только последний.

Решение: делайте накрутку счетчиков в пределах одного ховера.

Разработка крупных и средних проектов. Можно с криптой. Разумные цены. Хорошее качество. Адекватный подход. Продаем lenovo legion в спб, дешевле магазинов, новые, запечатанные. Есть разные. skype: edogssoft
Яндекс о накрутке поведенческих Как сегментировать пользователей по Яндекс расширяет максимальный срок
Einstein02
На сайте с 10.06.2009
Offline
164
Einstein02
#2
edogs:
hover - один обработчик на id.
У Вас - несколько висят на одном itimer. Задали 1-ый, потом перезаписали вторым, потом перезаписали третьим. Вот и выполняется только последний.
Решение: делайте накрутку счетчиков в пределах одного ховера.

Делал - не помогает(

Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#3

Einstein02, чегоб Вам не записать в один


$('#itimer').hover(function() {

все


$('.counter1').each(function(){
$('.counter2').each(function(){
$('.counter3').each(function(){

?

//TODO: перестать откладывать на потом
Einstein02
На сайте с 10.06.2009
Offline
164
Einstein02
#4

Ragnarok,

Удалить все .each(function(){}) ? Делал, не помогает... Удалял вообще условие $('#itimer').hover(function() {}) - тоже не работает

Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#5
Einstein02:
Ragnarok,

Удалить все .each(function(){}) ? Делал, не помогает... Удалял вообще условие $('#itimer').hover(function() {}) - тоже не работает

вставьте в один hover все each

Einstein02
На сайте с 10.06.2009
Offline
164
Einstein02
#6
Ragnarok:
вставьте в один hover все each
<script type="text/javascript">



$('#itimer').hover(function() {

var time = 1;
$('.counter3').each(function(){
var i = '1';

num = $(this).data('num'),
step = 10 * time / num,
that = $(this),
int = setInterval(function(){
if (i <= num) {
that.html(i);
}
else {
clearInterval(int);
}
i++;
},step);

});
$('.counter3').removeClass();


var time = 1;
$('.counter2').each(function(){
var i = '1';

num = $(this).data('num'),
step = 10 * time / num,
that = $(this),
int = setInterval(function(){
if (i <= num) {
that.html(i);
}
else {
clearInterval(int);
}
i++;
},step);

});
$('.counter2').removeClass();

var time = 1;
$('.counter11').each(function(){
var i = '1';

num = $(this).data('num'),
step = 10 * time / num,
that = $(this),
int = setInterval(function(){
if (i <= num) {
that.html(i);
}
else {
clearInterval(int);
}
i++;
},step);

});
$('.counter11').removeClass();


}, function() {
// обработчик отведения мыши
});

</script>

При таком раскладе вообще ничего не работает

---------- Добавлено 06.01.2016 в 12:38 ----------

Может лучше сделать с помощью другого способа накрутку счетчиков?

Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#7 


var time = 1;

зачем повторно объявлять переменные? 2 и последующий раз просто


time = 1;

и что не работает? откройте консоль (в хроме F12) и посмотрите

Einstein02
На сайте с 10.06.2009
Offline
164
Einstein02
#8

Теперь работает только второй счетчик... Как проверить js через инспектор хрома? 

<div id="bx_651765591_80" >



<div style="text-align: center;">

Проданных объектов:<br>

<img src="/numbers_2_1.png" alt="">



	<div class="counter11" data-num="800" style="font-size:40px">

		 1	</div>

</div>



</div>



		<div id="bx_651765591_82" >



<div style="text-align: center;">

Проданных объектов:<br>

<img src="/numbers_2_1.png" alt="">



	<div class="counter2" data-num="100" style="font-size:40px">

		 1	</div>

</div>



</div>



		<div id="bx_651765591_83" >



<div style="text-align: center;">

Проданных объектов:<br>

<img src="/numbers_2_1.png" alt="">



	<div class="counter3" data-num="800" style="font-size:40px">

		 1	</div>

</div>



<script type="text/javascript">







$('#itimer').hover(function() { 



var time = 1;

$('.counter3').each(function(){

var i = '1';



num = $(this).data('num'),

step = 10 * time / num,

that = $(this),

int = setInterval(function(){

if (i <= num) {

that.html(i);

}

else {

clearInterval(int);

}

i++;

},step);



});







time = 1;

$('.counter2').each(function(){

i = '1';



num = $(this).data('num'),

step = 10 * time / num,

that = $(this),

int = setInterval(function(){

if (i <= num) {

that.html(i);

}

else {

clearInterval(int);

}

i++;

},step);



});





time = 1;

$('.counter11').each(function(){

i = '1';



num = $(this).data('num'),

step = 10 * time / num,

that = $(this),

int = setInterval(function(){

if (i <= num) {

that.html(i);

}

else {

clearInterval(int);

}

i++;

},step);



});







}, function() {

// обработчик отведения мыши

});



</script>
Ragnarok
На сайте с 25.06.2010
Offline
239
Ragnarok
#9
Einstein02:
Как проверить js через инспектор хрома?

F12 -> вкладка Console

там будут ошибки, если они есть

werty1001
На сайте с 30.03.2008
Offline
82
werty1001
#10

Если нужно держите, вот накидал нормальный код.

Магазин аккаунтов с балансом Litres,DNS,Ozon,Rotapost и еще 50+ других сервисов тут - vk.cc/7QK0Sk
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий