alert массив данных при скролинге
Подскажите нужно при каждом скроле страницы добавлять видимые элементы в массив если их там еще нет, и делать alert этого массива.
Пробую так: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var viewed = []; function checkPosition(){ var needclass = $('.divtovata'); //Ищем все элементы по классу needclass.each(function (index, element) { if ($(document).scrollTop() + $(window).height() > $(element).offset().top && $(document).scrollTop() - $(element).offset().top < $(element).height() && $.inArray($(element).attr('data-product-id'), viewed) == -1) { //Проверяем показывался ли элемент ранее и виден ли он сейчас viewed.push($(element).attr('data-product-id')); //Добавляем элемент в массив, чтобы больше не отправлять по нему данные. Вставляем код отправки сюда } }); } $(document).ready(function(){ $(document).scroll(function(){ checkPosition(); }); checkPosition(); $(window).resize(function(){ checkPosition(); }); }); alert(viewed); </script> <div class="divtovata"><span class="a1">1</span></div> <br><br><br><br><br> <div class="divtovata"><span class="a1">2</span></div> <br><br><br><br><br> <div class="divtovata"><span class="a1">3</span></div> <br><br><br><br><br> <div class="divtovata"><span class="a1">4</span></div> <br><br><br><br><br> <div class="divtovata"><span class="a1">5</span></div> Т.е при открытии страницы надо вывести в массим и сделать алерт видимых элементов class="a1". При скроле страницы вниз надо в массив добавлять видимые элементы которых еще нет в массиве и опять же alert всего массива. Если возвращаемся в начало страницы то существующие элементы в массив повторно не добавляем. |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> span{ display: block; margin: 150px 0; } </style> </head> <body> <span class="a1">1</span> <span class="a1">2</span> <span class="a1">3</span> <span class="a1">4</span> <span class="a1">5</span> <script> var arr = []; function inWindow(){ var st = $(window).scrollTop(); $('.a1').each(function(){ var offset = $(this).offset(); if(st <= offset.top && ($(this).height() + offset.top) < (st + $(window).height()) && !arr.includes(this)){ arr.push(this); alert(arr); } }); } onscroll = inWindow; onresize = inWindow; </script> </body> </html> |
inWindow() - добавить если нужно искать видимые эл-ты сразу после загрузки DOM
|
Спасибо, отлично работает. А еще подскажите как добавить проверку, если элемент массива уже выводился то его больше не alert.
Т.е делать alert только для новых элементов массива, которых там еще не было? |
заменить
alert(arr); на alert(this); |
отлично работает, только если надо вывести 2 значения в alert
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> span{ display: block; margin: 150px 0; } </style> </head> <body> <div class="div"><span class="a1">1</span><span class="b1">a</span></div> <div class="div"><span class="a1">2</span><span class="b1">b</span></div> <div class="div"><span class="a1">3</span><span class="b1">c</span></div> <div class="div"><span class="a1">4</span><span class="b1">d</span></div> <div class="div"><span class="a1">5</span><span class="b1">e</span></div> <script> var arr = []; function inWindow(){ var st = $(window).scrollTop(); $('.div').each(function(){ var offset = $(this).offset(); p=$(this).children().find('.a1').text(); o=$(this).children().find('.b1').text(); if(st <= offset.top && ($(this).height() + offset.top) < (st + $(window).height()) && !arr.includes(p.''.o)){ arr.push(p.''.o); } alert(p.''.o); }); } onscroll = inWindow; onresize = inWindow; </script> </body> </html> надо тоже самое выводить только элементы массива которые еще не показывались только 2 переменные a1 и b1 можно через - |
эти значения должны быть склеины в одну строку?
|
если можно то лучше каждый с новой строки
|
Часовой пояс GMT +3, время: 21:48. |