iteracja JQ
March 10th, 2010
Comments off
Iteracja po wszystkich elementach listy, zaznaczając miejsce w którym się aktualnie znajdujemy na czerwono.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="wadziu">
<!-- Date: 2010-03-09 -->
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style type="text/css" media="screen">
.prev, .next {
cursor: pointer;
}
</style>
</head>
<body>
<div class="buttons">
<span class="prev">
prev
</span>
<span class="next">
next
</span>
</div>
<ul>
<li>uno</li>
<li>dwa</li>
<li>tri</li>
<li>quatro</li>
<li>five</li>
<li>six</li>
<li>sem</li>
<li>ojto</li>
<li>dziewięć</li>
<li>ostatni</li>
</ul>
</body>
</html>
<script type="text/javascript" charset="utf-8">
$().ready(function(){
//inicjalizacja zmiennej, iterujemy od zera ale ze wględu na inkrementację
//w linii 60 trzeba zainicjalizować zmienną o wartości -1
var next = -1;
$("span.next").click(function(){
if(next != -2 && next < 10)
{
//inkrementacja do następnego na liście
next++;
//kolor nastepnego na red, reszta rodzeństwa na black
$("ul li:eq(" + next + ")").css("color", "red");
$("ul li:eq(" + next + ")").siblings().css("color", "black");
}
//warunek graniczny, index na pierwszym elemencie
if(next == -2)
{
next = 0;
}
//warunek graniczny, index na ostatnim elemencie
if(next >= 10)
{
next = 9;
}
});
$("span.prev").click(function(){
if(next != -1 && next < 10)
{
//dekrementacja o jeden wcześniej na liście
--next;
//kolor poprzedniego na red, pozostałe black
$("ul li:eq(" + next + ")").css("color", "red");
$("ul li:eq(" + next + ")").siblings().css("color", "black");
}
//warunek graniczny, index na pierwszym elemencie
if(next == -1)
{
next = 0;
}
//warunek graniczny, index na ostatnim elemencie
if(next >= 10)
{
next = 9;
}
});
});
</script>
Categories: JQuery, Java Script, informacje ogólne
