AJAX toggle – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

AJAX toggle – JavaScript, AJAX, jQuery – Fórum – Programujte.comAJAX toggle – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Slim0
Návštěvník
13. 2. 2011   #1
-
0
-

Zdravím, mám menší problém

mám tento kód
$(function(){
$('.toggle').show();
$('div.obsah-nav-zobrazit').toggle(function(){
$('.toggle').slideDown("slow");
$('#skryt').attr("src","img/icony/minus.gif" );
},function(){
$('.toggle').slideUp("slow");
$('#skryt').attr("src", "img/icony/plus.gif" );
});
});

a ted, pokaždé, když položku skryju, tak se změní ikona, jde o plus a mínus. Jen
mě trápí jediná věc a to ta, že bych potřeboval, aby se skrývaly jednotlivé
elementy, takto se skryjou všechny elementy.

Nevěděl by někdo, jak na to?

Děkuju

Nahlásit jako SPAM
IP: 90.179.211.–
Reklama
Reklama
m->29+6
Super člen
13. 2. 2011   #2
-
0
-

V tom prípade skrývaj jednotlivé elementy a nie celý div. Teda, neviem ako vyzerá HTML toho čo skrývaš tak viac menej tipujem podľa toho JS čo si sem dal. Ale ak by si sem kus HTML dal tak by to mohlo pomôcť.

Nahlásit jako SPAM
IP: 83.240.51.–
Slim0
Návštěvník
15. 2. 2011   #3
-
0
-

Dobře, jinak ještě jednou AJAX skript je tady:



$(function(){
$('.toggle').show();
$('div.obsah-nav-zobrazit').toggle(function(){
$('.toggle').slideDown("slow");
$('.skryt').attr("src","img/icony/minus.gif" );
},function(){
$('.toggle').slideUp("slow");
$('.skryt').attr("src", "img/icony/plus.gif" );
});
});


A HTML:



<div class="obsah-nabidka">
<div class="obsah-nav">
<div class="obsah-nav-nazev">Něco 1</div>
<div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>
</div>
</div>
<div class="obsah-nabidka">
<div class="obsah-nav">
<div class="obsah-nav-nazev">Něco 2</div>
<div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>
</div>
</div>
<div class="obsah-nabidka">
<div class="obsah-nav">
<div class="obsah-nav-nazev">Něco 2</div>
<div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>
</div>
</div>


Díky :-)

Nahlásit jako SPAM
IP: 90.179.211.–
m->29+6
Super člen
16. 2. 2011   #4
-
0
-

No tak jQuery moc nepoužívam - väčšinou mi stačí čistý JS. Ale povedal by som, že namiesto skrývania všetkých elementov pomocou tried by si mal použiť this. V jQuery je tuším vždy mapovaný na aktuálny element. Hentak pracuješ s celou kolekciou elementov v danej triede.

Nahlásit jako SPAM
IP: 83.240.51.–
Nefaritus
~ Redaktor
+2
Posthunter
17. 2. 2011   #5
-
0
-

Přesně tak, použitím this to bude pracovat jen s "aktuálním" prvkem. Pak aby ses dostal dovnitř divu, budeš potřebovat metodu .children()

Nahlásit jako SPAM
IP: 93.99.142.–
Slim0
Návštěvník
17. 2. 2011   #6
-
0
-

Už se v tom začínám ztrácet. Zkouším to a zkouším. Zatímco plus a mínus se mění jednotlivě pomocí this, tak nemůžu udělat, aby se ten element skryl, asi to dělám blbě. Dumám nad tím celý den, tak už se opět obracím sem. Moc se omlouvám, za tyto stupidní otázky, ale hrozně moc mi to pomůže



$(function(){
$('.toggle').show();

$('.skryt').toggle(function(){

$(this).attr("src","img/icony/minus.gif" ).children('.toggle').slideDown("slow");
return false;

},function(){

$(this).attr("src", "img/icony/plus.gif" ).children('.toggle').slideUp("slow");
return false;

});
});

Nahlásit jako SPAM
IP: 90.179.211.–
Nefaritus
~ Redaktor
+2
Posthunter
19. 2. 2011   #7
-
0
-

A kde máš použitou tu classu .toggle? V HTML ji nikde nevidím...

Nahlásit jako SPAM
IP: 93.99.142.–
Nefaritus
~ Redaktor
+2
Posthunter
19. 2. 2011   #8
-
0
-

A zrovna na .skryt nemůžeš aplikovat .children(), protože ten prvek je na nejnižší úrovni -> nemá children :)

Nahlásit jako SPAM
IP: 93.99.142.–
Slim0
Návštěvník
19. 2. 2011   #9
-
0
-

Promin, zapomněl jsem to tam dopsat:



<div class="obsah-nabidka">
<div class="obsah-nav">
<div class="obsah-nav-nazev">Něco 1</div>
<div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>
</div>
</div>
<div class="toggle">
<p>text</p>
</div>

<div class="obsah-nabidka">
<div class="obsah-nav">
<div class="obsah-nav-nazev">Něco 2</div>
<div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>
</div>
</div>
<div class="toggle">
<p>text</p>
</div>

<div class="obsah-nabidka">
<div class="obsah-nav">
<div class="obsah-nav-nazev">Něco 3</div>
<div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>
</div>
</div>
<div class="toggle">
<p>text</p>
</div>


Mohl bych tě poprosit, jak mám tedy použít tu metodu children()?

Děkuji

Nahlásit jako SPAM
IP: 90.179.211.–
Nefaritus
~ Redaktor
+2
Posthunter
19. 2. 2011   #10
-
0
-

No udělat každému bloku obalový div...nějak takhle:

<div class="wrapper">

<div class="obsah-nabidka">
<div class="obsah-nav">
<div class="obsah-nav-nazev">Něco 2</div>
<div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>
</div>
</div>
<div class="toggle">
<p>text</p>
</div>
</div>

Pak si v rámci něj můžeš pohrát s metodami .parent() a .children()
$('div.obsah-nav-zobrazit).click(function() {

$(this).attr('src','img/icony/minus.gif');
$(this).parent().parent().parent().children('div.toggle:hidden').slideDown('fast');
});

Nahlásit jako SPAM
IP: 93.99.142.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 8 hostů

Podobná vlákna

AJAX — založil netman92

Ajax — založil Paja2

Help! - Ajax — založil Jenda_CZ

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý