Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2018, 01:23
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

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 всего массива.
Если возвращаемся в начало страницы то существующие элементы в массив повторно не добавляем.
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2018, 01:55
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2018, 01:59
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

inWindow() - добавить если нужно искать видимые эл-ты сразу после загрузки DOM
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2018, 11:26
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

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

Т.е делать alert только для новых элементов массива, которых там еще не было?
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2018, 14:20
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

заменить
alert(arr);
на
alert(this);
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2018, 18:40
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

отлично работает, только если надо вывести 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 можно через -
Ответить с цитированием
  #7 (permalink)  
Старый 18.05.2018, 20:17
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

эти значения должны быть склеины в одну строку?
Ответить с цитированием
  #8 (permalink)  
Старый 18.05.2018, 21:51
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно объявить массив при вызове функции wet jQuery 2 19.09.2016 15:10
Чтение данных из файла в массив TheSingleElk Общие вопросы Javascript 2 16.06.2016 01:09
Добавление данных в многомерный массив rneft Элементы интерфейса 11 28.03.2016 17:56
При добавлении данных в MySQL Davydov jQuery 4 12.01.2015 16:20
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04