Jak pod jeden link podpiąć skrypt, który po każdorazowym kliknięciu wywoła kolejnego div'a? Opcje

[marcus755]

Hej wszystkim,

zrobiłem coś takiego:

<div id="bloki" style="display:block;">
<div id="blok_1" style="width:200px; height:100px;">Lorem ipsum 1</div>
<div id="blok_1" style="width:200px; height:100px;">Lorem ipsum 2</div>
<div id="blok_1" style="width:200px; height:100px;">Lorem ipsum 3</div>
<div id="blok_1" style="width:200px; height:100px;">Lorem ipsum 4</div>
</div>

<div id="bloki2" style="display:none;">
<div id="bloki_2" style="width:200px; height:100px;">Lorem ipsum 11</div>
<div id="bloki_2" style="width:200px; height:100px;">Lorem ipsum 21</div>
<div id="bloki_2" style="width:200px; height:100px;">Lorem ipsum 31</div>
<div id="bloki_2" style="width:200px; height:100px;">Lorem ipsum 41</div>
</div>

<div id="bloki3" style="display:none;">
<div id="blok_3" style="width:200px; height:100px;">Lorem ipsum 110</div>
<div id="blok_3" style="width:200px; height:100px;">Lorem ipsum 210</div>
<div id="blok_3" style="width:200px; height:100px;">Lorem ipsum 310</div>
<div id="blok_3" style="width:200px; height:100px;">Lorem ipsum 410</div>
</div>

<a id="next" class="next" href="#">next div</a>

<script>
$(document).ready(function() {
$('#next').click(function(){
$('div#bloki2:hidden').fadeIn();
});
});
</script>

Jak zrobić, żeby jak kliknę jeszcze raz w ten sam link,
wywołał mi id="bloki3" ?

Ten post edytował marcus755 8.01.2013, 10:01:45

[mokry]

Każdemu z div'ów nadajesz jakąś klasę (np. .toShow).
Następnie, po kliknięciu na #next lecisz za pomocą each() po każdym divie z klasą .toShow i sprawdzasz czy display jest ustawiony na none, jeśli tak, dajesz fadeIn() na nim i przerywasz skrypt (return false;).

Tu masz rozwiązanie na szybko:
http://jsfiddle.net/9bD8m/2/

Przy okazji zamiast powtarzać za każdym razem style w divach, zdefiniuj jedną klasę i przypisz ją każdemu z osobna. Lub jeszcze lepiej, zdefiniuj w CSS "div.toShow div {}" i możesz ominąć jakiekolwiek style i klasy w tych divach w środku.
Pamiętaj też o tym, że atrybut id dla jakiegokolwiek elementu musi być unikalny w całym dokumencie, zatem zmień sobie u siebie te powtarzające się id .

Ten post edytował mokry 8.01.2013, 11:14:08

[cfk]

spróbuj skorzystać z czegoś takiego

[HTML] pobierz, plaintext 
//pierwsze klikniecie
document.getElementById('blok2').style.display=='block';
 
//kazde kolejne
if ((document.getElementById('blok2').style.display=='block')
{							
    document.getElementById('blok3).style.display='block';
}
[HTML] pobierz, plaintext 

napisz to jako funkcje i podłącz na onclick

[marcus755]

Wielkie Dzięki za pomoc:-)

Ten post edytował marcus755 9.01.2013, 16:19:15