| Klerikadm |
06.12.2013 13:47 |
Добавление и удаление класса по таймеру
Доброго времени суток уважаемые форумчане!
нужна ваша помощь, чтобы разобраться с кодом.
Суть такова, каждые 5 секунд скрипт кликает на ссылки (мне помогли его сделать тут http://javascript.ru/forum/css-html/...tml#post282629). После этого, потребовалось доработать скрипт, чтобы он не только кликал каждые 5 секунд на ссылку но и добавлял к ней класс:
jQuery(document).ready(function ($) {
var links = $('a[href*=#]').get().reverse(),
len = links.length,
clickTimer = setInterval(function () {
links[--len].click();
$(links[len]).addClass('red');
len == 0 && clearTimeout(clickTimer);
}, 5000);
});
Потом, потребовалось, чтобы этот класс через 4 секунды после добавления удалялся и я его реализовал с помощью добавления еще одного таймера. В итоге в списке появляется первый объект с классом ('red'), потом второй элемент с этим классом, а у предыдущего элемента остается еще старый класс
Для ясности картины прилагаю html и js
<!DOCTYPE html>
<html>
<head>
<title>Click</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/click.js"></script>
<script type="text/javascript" src="js/intercept_links.js"></script>
</head>
<body>
<div>
<ul class="left">
<li><a href="#one">One</a></li>
<li><a href="#one1">One1</a></li>
<li><a href="#one2"><span id="click_2">One2</span></a></li>
<li><a href="#one3"><span id="click_1">One3</span></a</li>
<li><a href="#one4">One4</a></li>
</ul>
</div>
<div class="picture">
<ul>
<li><a name="one"><img src="img/001.jpg" alt="1" title="new"></a></li>
<li><a name="one1"><img src="img/002.jpg" alt="1" title="new"></a></li>
<li><a name="one2"><img src="img/003.jpg" alt="1" title="new"></a></li>
<li><a name="one3"><img src="img/004.jpg" alt="1" title="new"></a></li>
<li><a name="one4"><img src="img/005.jpg" alt="1"></a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function($){
$('img[alt]').addClass('test').add('img[title]').addClass('test2')
});
</script>
</body>
</html>
jQuery(document).ready(function ($) {
var links = $('a[href*=#]').get().reverse(),
len = links.length,
clickTimer = setInterval(function () {
links[--len].click();
$(links[len]).addClass('red');
clickTimer = setInterval(function () {
$(links).removeClass('red');
}, 9000);
len == 0 && clearTimeout(clickTimer);
}, 5000);
});
|