dynamicky zapis do jQuery

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
dotTwelve
Člen | 167
+
0
-

Narazil jsem na problem.
Potrebuji napsat funkci jQuery, ktera po najeti mysi na odkaz rozbali skryty DIV. Techto odkazu a DIVu je ovsem na strance nekolik, tudiz pokud bych to udelal jako CLASS, tak po najeti by se mi rozbalily vsechny tyto DIVy. Takze asi budu muset kazdemu odkazu a divu priradit nejake ID, to by nebyl problem. Ale jak zajistit aby se mi i jQuery generovalo automaticky?

Vlastne mam tuto strukturu:

<script>
<a href="#" id="zobrazit-1">zobrazit</a>
<div id="zobrazitObsah-1" style="display:none">obsah</div>

<a href="#" id="zobrazit-2">zobrazit</a>
<div id="zobrazitObsah-2" style="display:none">obsah</div>
</script>

kde v cyklu pomoci $iterator->getCounter() pripisuju cislo do id="" odkazu i divu.
Jenze tedka potrebuju napsat v jQuery funkci ktera zobrazi po kliknuti na odkaz zobrazit-1 div zobrazitObsah-1.

Vim, da se napsat i rucne, ale ja to potrebuju dynamicke, protoze to vypisu v tabulce a zaznamu muze byt neomezene.

Editoval dotTwelve (30. 3. 2010 14:37)

iguana007
Člen | 970
+
0
-

ja bych to udělal následovně:
přepsal bych id na class u toho klikacího odkazu a všechny se budou jmenovat stejně a pak už jen vložit následující jQuery kód do stránky (nevím to přesně, píšu z hlavy, ale nápad je z příkladu jasný):

EDIT:

$('.klikaciOdkaz').click(function () {
	$(this).next().show();
});

uvnitř toho hidden DIVu vložíš odkaz hned za otevírací DIV tag a pak doplníš ten jQuery kód o něco takového:

$('.zaviraciOdkaz').click(function () {
	$(this).prev().hide();
});

Takto nemusíš nic dynamicky do jQuery generovat a stačí ti jeden zápis. Já osobně to ještě řeším tak, že pokud je ten hidden element rozsáhlejěí a doplňuji do něj jen nějaký text, tak si ten text uložím třeba do atributu toho odkazu a na klik si vezmu jen jeden DIV někde z patičky a doplním do něj text z atributu. Podobně třeba řeším vícenásobnou nápovědu u políček formulářů …

Editoval iguana007 (30. 3. 2010 15:28)

redhead
Člen | 1313
+
0
-
<script>
$('a[id^="zobrazit-"]').click(function() {
	$('#'+this.id+'-Obsah').show();
});
</script>

funguje to ale treba na zobrazit-1-Obsah (namísto zobrazitObsah-1, ale to už si upravíš, nechtělo se mi to psát)

Editoval redhead (30. 3. 2010 15:45)

bazo
Člen | 620
+
0
-

preco tak zlozito?

<script>
$('a.nejakyclass').toggle(
function(){
	$(this).next().show();
},
function(){
	$(this).next().hide();
});
</script>

ale toto je skor do nejakeho jquery fora

redhead
Člen | 1313
+
0
-

a co když ty elementy nejsou za sebou? nebo tam nějaký element později přidá??

Rampa
Člen | 65
+
0
-

pokud nejsou za sebou, tak já to řešil před časem takhle:

<script>
 <div class="klikatko" id="klik1">klik</div>
...
 <div class="rozbalovaci klik1">blabla</div>
...

 $(".klikatko").toggle(
   function(){
     $("."+$(this).attr('id')).show();
   },
	... hide()
   );
</script>

asi tam bude nějaká chyba, je to vzpomínka z hlavy, ale funkce je snad z toho jasná… :)
no a ty idéčka a klasy klik1 si tam už naházíš dynamicky.

Editoval Rampa (30. 3. 2010 16:35)

dotTwelve
Člen | 167
+
0
-

redhead napsal(a):

<script>
$('a[id^="zobrazit-"]').click(function() {
	$('#'+this.id+'-Obsah').show();
});
</script>

funguje to ale treba na zobrazit-1-Obsah (namísto zobrazitObsah-1, ale to už si upravíš, nechtělo se mi to psát)

Tak jsem to tak udelal, jak pristoupim k promenne ID v jQuery? Potrebuji to i na druhy odkaz, ktery mi to zavre, ovsem ma jine ID

iguana007
Člen | 970
+
0
-

dotTwelve napsal(a):

redhead napsal(a):

<script>
$('a[id^="zobrazit-"]').click(function() {
	$('#'+this.id+'-Obsah').show();
});
</script>

funguje to ale treba na zobrazit-1-Obsah (namísto zobrazitObsah-1, ale to už si upravíš, nechtělo se mi to psát)

Tak jsem to tak udelal, jak pristoupim k promenne ID v jQuery? Potrebuji to i na druhy odkaz, ktery mi to zavre, ovsem ma jine ID

$(TvujSelektor).attr('id').val();

Editoval iguana007 (30. 3. 2010 17:09)

bazo
Člen | 620
+
0
-

redhead napsal(a):

a co když ty elementy nejsou za sebou? nebo tam nějaký element později přidá??

tak si to zmeni? ale nie je potreba generovat pre kazdy ten div kod, da sa to napisat univerzalne. funkcii na najdenie elementu je v jquery na mraky, staci si vybrat, ja som mu to napasoval na ten markup co napisal

dotTwelve
Člen | 167
+
0
-

iguana007 napsal(a):

dotTwelve napsal(a):

redhead napsal(a):

<script>
$('a[id^="zobrazit-"]').click(function() {
	$('#'+this.id+'-Obsah').show();
});
</script>

funguje to ale treba na zobrazit-1-Obsah (namísto zobrazitObsah-1, ale to už si upravíš, nechtělo se mi to psát)

Tak jsem to tak udelal, jak pristoupim k promenne ID v jQuery? Potrebuji to i na druhy odkaz, ktery mi to zavre, ovsem ma jine ID

$(TvujSelektor).attr('id').val();
<script>
$('a[id^="skryt-"]').click(function(){
	$('#zobrazit-'+$(this).attr('id').val()+'-Obsah').hide();
});
</script>

toto nefunguje :(

Editoval dotTwelve (30. 3. 2010 17:25)

iguana007
Člen | 970
+
0
-

a co toto?

<script>
$('a[id^="skryt-"]').click(function(){
	var idecko = $(this).attr('id').val();
        $('#zobrazit-'+ parseInt(idecko) +'-Obsah').hide();
});
</script>
dotTwelve
Člen | 167
+
0
-

nene, to taky nechodi…

iguana007
Člen | 970
+
0
-

no těžko říct bez toho abychom videli na jaky presny vystup, na ktery to aplikujes a cim plnis tu promennou id :) tak tady zkus vlozit nahled na zdrojak… a neco se s tim urcite udela ;)

ale jak uz psal bazo, toto je spis do jQuery fora a ne Nette :)

dotTwelve
Člen | 167
+
0
-
<script>
$('a[id^="zobrazit-"]').click(function(){
        $('#'+this.id+'-Obsah').show();
    });

    $('a[id^="skryt-"]').click(function(){
        var idecko = $(this).attr('id').val();
        $('#zobrazit-'+ parseInt(idecko) +'-Obsah').hide();
    });
</script>

sablona

<script>
<tr>
        <th scope="row" class="spec">Č. 3</th>
        <td >200 m²</td>
        <td >3 400 000 Kč</td>
        <td > Aktuální</td>
        <td class="domy">
            <a href="#" id="zobrazit-3">Zobrazit</a> <a href="#" id="skryt-3">Skrýt</a>
        </td>
        </tr>
        <tr>
        <td colspan="5" style="display:none" id="zobrazit-3-Obsah" class="zobrazitDomyObsah">
<img src="/dokumenty/domy/wood-96/wood-96-pohled-1_t.jpg" width="75" />
<a href="/domy/wood-96/">WOOD 96</a>
        </td>
        </tr>

</script>
bazo
Člen | 620
+
0
-

chyba je tu

<script>
var idecko = $(this).attr('id').val(); na attr() sa val() uz nepouziva
a tu
markup: id="skryt-3 z toho 3 nikdy nebude
</script>
blacksun
Člen | 177
+
0
-

Pro ne úplně kované v javascriptu doporučuji sadu nástrojů phpjs (http://phpjs.org/), kde se většina věcí v js dá udělat obdobou php funkcí se stejnou syntaxí.

Honza Kuchař
Člen | 1661
+
0
-

Hlavně doporučuji používat dokumentaci jQuery. http://docs.jquery.com/