Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   alert массив данных при скролинге (https://javascript.ru/forum/jquery/73812-alert-massiv-dannykh-pri-skrolinge.html)

djonA 18.05.2018 01:23

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 всего массива.
Если возвращаемся в начало страницы то существующие элементы в массив повторно не добавляем.

j0hnik 18.05.2018 01:55

<!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>

j0hnik 18.05.2018 01:59

inWindow() - добавить если нужно искать видимые эл-ты сразу после загрузки DOM

djonA 18.05.2018 11:26

Спасибо, отлично работает. А еще подскажите как добавить проверку, если элемент массива уже выводился то его больше не alert.

Т.е делать alert только для новых элементов массива, которых там еще не было?

j0hnik 18.05.2018 14:20

заменить
alert(arr);
на
alert(this);

djonA 18.05.2018 18:40

отлично работает, только если надо вывести 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 можно через -

j0hnik 18.05.2018 20:17

эти значения должны быть склеины в одну строку?

djonA 18.05.2018 21:51

если можно то лучше каждый с новой строки


Часовой пояс GMT +3, время: 14:36.