Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как на jQuery сделать автоматический переход по ссылкам с якорем? (https://javascript.ru/forum/jquery/65991-kak-na-jquery-sdelat-avtomaticheskijj-perekhod-po-ssylkam-s-yakorem.html)

SV4 19.11.2016 21:36
Как на jQuery сделать автоматический переход по ссылкам с якорем?
 
Доброго вечера знатокам JS! :victory:
Нужна ваша помощь в написании скрипта автоматического перехода
по ссылкам с якорем на одной странице.

Имеется вот такой html (для примера)
<html>
<body>

<div><img onclick="скрипт">кнопка посмотреть список</img></div>

<div align="center">
<div id="div1"> контейнер <strong>(№1)</strong></div>
<div><a href="#div2" class="GoDiv">ссылка на контейнер (№2)</a></div>
<div> здесь содержимое (№1) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>

<br>
<br>

<div align="center">
<div id="div2"> это контейнер <strong>(№2)</strong></div>
<div><a href="#div3" class="GoDiv">ссылка на контейнер (№3)</a></div>
<div> здесь содержимое (№2) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>

<br>
<br>

<div align="center">
<div id="div3"> это контейнер <strong>(№3)</strong></div>
<div><a href="#div4" class="GoDiv">ссылка на контейнер (№4)</a></div>
<div> здесь содержимое (№3) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>

<div align="center">
<div id="div4"> контейнер <strong>(№4)</strong></div>
<div><a href="#div5" class="GoDiv">ссылка на контейнер (№5)</a></div>
<div> здесь содержимое (№4) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>

<br>
<br>

<div align="center">
<div id="div5"> это контейнер  <strong>(№5)</strong></div>
<div><a href="#div1" class="GoDiv">ссылка на контейнер (№1)</a></div>
<div> здесь содержимое (№5) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>


</body>
</html>


Третий день безуспешно пытаюсь написать скрипт автоматического перехода по ссылкам с якорем и классом "GoDiv"

Прочитал страницы учебника по таким темам как:
как найти элементы с одним классом (getElementsByClassName)
как перебрать массив в цикле
как сделать задержку по времени
и всё что мне показалось пригодным для создания скрипта.

Теперь в голове всё перемешалось и я совсем запутался.
Если сперва у меня что то немного получалось, то теперь мой
скрипт совсем перестал работать
получился чудо велосипед на jQuery :haha:
В общем я его удалил с концами...
И мне ничего не осталось как обратится к спецам то есть к вам!:help:

что должен сделать скрипт:
1) пользователь нажимает кнопку "посмотреть список"
2) скрипт запускается и проходит по очереди по всем ссылкам
у которых указан класс "GoDiv" (количество ссылок всегда разное)
на каждом блоке задерживается на пять секунд.
3) дойдя до последнего блока, делает так же задержку 5 сек. и возвращается к первому. Там и останавливается.

В гугл и учебник прошу не отправлять, там я был и безрезультатно.
Если бы получилось написать код самостоятельно, то так бы и сделал.

Coriolan161 20.11.2016 18:04
SV4,
([]+{})[!+[]+!+[]<<+!+[]]
+(prompt+([]+[]))[+[+!+[]+[+[]]]-+!+[]]
+([![]]+[][[]])[+!+[]+[+[]]]
+([]+{})[+[+!+[]+[+[]]]/[!+[]+!+[]]]
+([]+{})[(+!+[]+!+[]+!+[]<<+!+[])+!+[]]
+(![]+[])[+[]]
+(+[][[]]+[]+[])[+!+[]]
+([![]]+[][[]])[+!+[]+[+[]]]
+(![]+[])[!+[]+!+[]];

SV4 21.11.2016 06:00
Какой исчерпывающий ответ ;)
Единственное, что я из этого всего понял prompt
Но мне это точно не поможет

ksa 21.11.2016 09:39
Цитата:
Сообщение от SV4
что должен сделать скрипт:
1) пользователь нажимает кнопку "посмотреть список"
2) скрипт запускается и проходит по очереди по всем ссылкам
у которых указан класс "GoDiv" (количество ссылок всегда разное)
на каждом блоке задерживается на пять секунд.
3) дойдя до последнего блока, делает так же задержку 5 сек. и возвращается к первому. Там и останавливается.
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#list img {
	cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function (){
	var obj=$('.GoDiv').parent().prev();
	var tmout=2000;
	var pos;
	$('#list img').click(function (){
		pos=0;
		go();
	});
	function go(){
		var id=obj.eq(pos).prop('id');
		++pos;
		if (pos>obj.length){
			id=obj.eq(0).prop('id');
			setTimeout(function(){
				top.location='#'+id;
			},tmout);
			return;
		};
		top.location='#'+id;
		setTimeout(go,tmout);
	};
});
</script>
</head>
<body>
<div id='list'><img src='http://javascript.ru/forum/images/smilies/victory.gif'>кнопка посмотреть список</img></div>
<div align="center">
	<div id="div1"> контейнер <strong>(№1)</strong></div>
	<div><a href="#div2" class="GoDiv">ссылка на контейнер (№2)</a></div>
	<div> 
		здесь содержимое (№1) и в нём некоторый текст....<br>
		-------------------------------------------------------<br>
		-------------------------------------------------------<br>
		-------------------------------------------------------
	</div>
</div>
<br>
<br>
<div align="center">
<div id="div2"> это контейнер <strong>(№2)</strong></div>
<div><a href="#div3" class="GoDiv">ссылка на контейнер (№3)</a></div>
<div> здесь содержимое (№2) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div3"> это контейнер <strong>(№3)</strong></div>
<div><a href="#div4" class="GoDiv">ссылка на контейнер (№4)</a></div>
<div> здесь содержимое (№3) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div4"> контейнер <strong>(№4)</strong></div>
<div><a href="#div5" class="GoDiv">ссылка на контейнер (№5)</a></div>
<div> здесь содержимое (№4) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div5"> это контейнер  <strong>(№5)</strong></div>
<div><a href="#div1" class="GoDiv">ссылка на контейнер (№1)</a></div>
<div> здесь содержимое (№5) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
</body>
</html>

Coriolan161 21.11.2016 11:03
SV4,
Это ArrayScript

SV4 21.11.2016 18:06
Цитата:
Сообщение от ksa (Сообщение 435617)
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#list img {
	cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function (){
	var obj=$('.GoDiv').parent().prev();
	var tmout=2000;
	var pos;
	$('#list img').click(function (){
		pos=0;
		go();
	});
	function go(){
		var id=obj.eq(pos).prop('id');
		++pos;
		if (pos>obj.length){
			id=obj.eq(0).prop('id');
			setTimeout(function(){
				top.location='#'+id;
			},tmout);
			return;
		};
		top.location='#'+id;
		setTimeout(go,tmout);
	};
});
</script>
</head>
<body>
<div id='list'><img src='http://javascript.ru/forum/images/smilies/victory.gif'>кнопка посмотреть список</img></div>
<div align="center">
	<div id="div1"> контейнер <strong>(№1)</strong></div>
	<div><a href="#div2" class="GoDiv">ссылка на контейнер (№2)</a></div>
	<div> 
		здесь содержимое (№1) и в нём некоторый текст....<br>
		-------------------------------------------------------<br>
		-------------------------------------------------------<br>
		-------------------------------------------------------
	</div>
</div>
<br>
<br>
<div align="center">
<div id="div2"> это контейнер <strong>(№2)</strong></div>
<div><a href="#div3" class="GoDiv">ссылка на контейнер (№3)</a></div>
<div> здесь содержимое (№2) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div3"> это контейнер <strong>(№3)</strong></div>
<div><a href="#div4" class="GoDiv">ссылка на контейнер (№4)</a></div>
<div> здесь содержимое (№3) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div4"> контейнер <strong>(№4)</strong></div>
<div><a href="#div5" class="GoDiv">ссылка на контейнер (№5)</a></div>
<div> здесь содержимое (№4) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
<br>
<br>
<div align="center">
<div id="div5"> это контейнер  <strong>(№5)</strong></div>
<div><a href="#div1" class="GoDiv">ссылка на контейнер (№1)</a></div>
<div> здесь содержимое (№5) и в нём некоторый текст....<br>
-------------------------------------------------------<br>
-------------------------------------------------------<br>
-------------------------------------------------------
</div>
</div>
</body>
</html>
Большое Человеческое Спасибо!!!
Только не могу понять почему на последнем блоке двойная задержка
по времени. В какую строку надо смотреть?

SV4 21.11.2016 18:43
Цитата:
Сообщение от ksa (Сообщение 435617)
Как вариант...

<script type='text/javascript'>
$(function (){
var obj=$('.GoDiv').parent().prev();
var tmout=2000;
var pos;
$('#list img').click(function (){
pos=0;
go();
});
function go(){
var id=obj.eq(pos).prop('id');
++pos;
if (pos>obj.length){
id=obj.eq(0).prop('id');
setTimeout(function(){
top.location='#'+id;
},tmout);
return;
};
top.location='#'+id;
setTimeout(go,tmout);
};
});
</script>

[/html]
Если я не ошибаюсь то что бы убрать задержку в последнем блоке
надо делать так:
Создать ещё одну переменную, что бы узнать количество
всех блоков. например:
var count_obj = $("a.GoDiv").length;

затем создать условие внутри функции setTimeout:
if (pos==count_obj) {var tmout=1000;}


или я снова горожу велосипед :no:


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