Форум

m.koloskov · #1 (**permalink**) 28.01.2013, 12:15

Мой скрипт. при клике на NEXT добавляет активный класс следующему элементу. Нужно дополнить: Если элемент последный, добавить class = «active» Первому.

HTML:
<ul class=«pagination»>
<li class=«active»><a class=«one» href="#">X</a></li>
<li><a class=«two» href="#">X</a></li>
<li><a class=«three» href="#">X</a></li>
</ul>

<a href="" class=«next»>Next</a>
<a href="" class=«prev»>Prev</a>

JS:
$('.next').click(function(){
$('ul.pagination').find('li.active').removeClass(' active').next().addClass('active');
return false;
});

CSS:
.active a {background:red;}

danik.js · #2 (**permalink**) 28.01.2013, 13:06

var items = $('ul.pagination').children();
var index = 0;
$('.next, .prev').click(function(e){
    items.eq(index).removeClass('active');
    if (this.className == 'next')
        index = (index == items.length-1) ? 0 : ++index;
    else 
        index = (index == 0) ? items.length-1 : --index;
    items.eq(index).addClass('active');
    e.preventDefault();
});

рони · #3 (**permalink**) 28.01.2013, 13:16

m.koloskov,
Вариант...

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<style type="text/css">
.active a {background:red;}
</style>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('.next').click(function(){
var next = $('ul.pagination').find('li.active').removeClass('active').next()
next.index() < 0 &&(next = $("ul.pagination li:first"));
next.addClass('active');
 return false;
 });
$('.prev').click(function(){
var prev = $('ul.pagination').find('li.active').removeClass('active').prev()
prev.index() < 0 &&(prev = $("ul.pagination li:last"));
prev.addClass('active');
 return false;
 });
});
</script>
</head>

<body>
<ul class="pagination">
 <li class="active"><a class="one" href="#">X</a></li>
 <li><a class="two" href="#">X</a></li>
 <li><a class="three" href="#">X</a></li>
 </ul>
<a href="" class="next">Next</a>
<a href="" class="prev">Prev</a>
</body>
</html>

danik.js · #4 (**permalink**) 28.01.2013, 13:25

jquery портит людей )
jquery заставляет делать все через dom-манипуляцию и перемещение по dom-у. Цепочки заставляют отказываться от "кэширования" в переменные.

Форум

Справочник

Discord чат

Курсы javascript