[JQuery] Toggle probleem

[nickb90]

Beste,

Ik ben redelijk nieuw tot het gebruik van jQuery, wat overigens leuk speelgoed is. Ik loop nu tegen het probleem aan dat ik als er op een knop gedrukt is de volgende <tr> wil laden.

Ik denk dat de code het duidelijker maakt dus eerst de code

JavaScript:

$(document).ready(function(){
   $('.hidden').hide(); // Hide even though it's already hidden
   $('a#edit').click(function() {
      $('.hidden').toggle(400); // First click should toggle to 'show'
      return false;
   });
});

Die code zorgt ervoor dat alle velden met de classe "hidden" zichtbaar worden zodra er op de knop edit is gedrukt.

Nu wil ik dat enkel de eerst volgende tr geladen word(eventueel met de classe "hidden") en niet allemaal. Nu heb ik op internet zitten zoeken en kwam ik tot de volgende code

JavaScript:

$(document).ready(function(){
   $('.hidden').hide(); // Hide even though it's already hidden
   $('a#edit').click(function() {
      $(this).next("tr").show(); // First click should toggle to 'show'
      return false;
   });
}); 

Heb het volgende ook al geprobeerd

JavaScript:

$(document).ready(function(){
   $('.hidden').hide(); // Hide even though it's already hidden
   $('a#edit').click(function() {
      $(this).next(".hidden").show(); // First click should toggle to 'show'
      return false;
   });
}); 

Maar als ik dan op mijn knopje drukt gebeurd er niets.

Hierbij als laatst nog de html

HTML:

<tr>
    <td><a href="" id="edit" ><img src="link naar plaatje" alt="edit" /></a></td>
</tr>
<tr class="hidden">
    <td>Hier de zichtbare informatie indien er op de knop gedrukt is</td>
</tr>

Weet iemand of dit een zet in de goede richting is? Of haal ik meerdere dingen nu door elkaar? Normaals ik ben nog nieuw tot jQuery, dus links naar goede tutorials over dit probleem zijn ook welkom

Alvast bedankt!

[ Voor 8% gewijzigd door nickb90 op 19-01-2010 12:35 ]

[Bosmonster]

Vervang de tables allereerst eens voor divs.

Daarnaast een klein detail overigens. Gebruik geen ankers als je alleen maar een knopje wilt hebben. Je kunt eenvoudig gewoon de afbeelding gebruiken, daar via CSS een andere cursor aanhangen en een click-functie. Dan zit niet hele je pagina vol met links die nergens naar toe gaan.

En als laatste maar over je probleem: kijk eens in de documentatie naar next(). Dan zie je dat deze de next sibling opvraagt. Je zult dus eerst naar de parent-TR moeten navigeren.

[ Voor 104% gewijzigd door Bosmonster op 19-01-2010 13:15 ]

[nickb90]

Bedankt Bosmonster,

Ik heb het probleem inmiddels opgelost door de volgende code

JavaScript:

$(document).ready(function() {
    $("tr. hidden").hide();

    $("#edit").click(function() {
        $(this).parent().parent().next("tr. hidden").slideToggle();
    });

});

Ik snap nu in ieder geval beter hoe het werkt bednakt voor de tip!

[bindsa]

nickb90 schreef op dinsdag 19 januari 2010 @ 15:30:
Bedankt Bosmonster,

Ik heb het probleem inmiddels opgelost door de volgende code

JavaScript:

$(document).ready(function() {
    $("tr. hidden").hide();

    $("#edit").click(function() {
        $(this).parent().parent().next("tr. hidden").slideToggle();
    });

});

Ik snap nu in ieder geval beter hoe het werkt bednakt voor de tip!

Dit zou ook moeten werken en scheelt aanzienlijk in snelheid:

JavaScript:

$(document).ready(function() {
    $("tr. hidden").hide();

    $("#edit").click(function() {
        $(this).find(':nth-child(1)').slideToggle();
    });

});

Wat het eigenlijk betekent is dat hij simpelweg de eerstvolgende child pakt en die toggelt.

[dumpie]

Geen topickaping, maar heb een vergelijkbaarprobleem met JQuery, alleen slide bij mij een bepaald gedeelte niet en een ander gedeelte weer wel.

Ik heb volgens:
http://www.i-marco.nl/weblog/jquery-accordion-menu/

ook een menu opgebouwd, dit werkt met uitzondering van de eerste 2 menupunten die de rest van het menu niet naar beneden slicen maar juist overlappen.

Heb de code regel voor regel nagekeken om verschil te zoeken tussen de verschillende punten, maar die zie ik nergens . Tevens las ik ergens dat het misschien met hoogte ed te maken heeft, maar dit heb ik ook op ieder stukje aangepast zonder resultaat. Vind het zo apart dat ik er kneiter van word.

Live voorbeeld:

http://bink.essence-business.nl/

Eerste 2 items overlappen de rest, en de andere items werken wel.

Source van dit stukje:

code:

<ul id="menu">                           
<li><a href="#">Home</a>
<ul>
<li><a href="index.php?page=900">Plan van aanpak</a></li>
<li><a href="index.php?page=899">De vier speerpunten</a></li>
</ul>
</li>
<li><a href="#">Nieuws</a>
<ul>
<li><a href="index.php?page=901">Archief</a></li>
</ul>
</li>
<li><a href="#">4 essenti&euml;le vragen</a>    
<ul>
<li><a href="index.php?page=900">Plan van aanpak</a></li>
<li><a href="index.php?page=899">De vier speerpunten</a></li>
</ul>
</li>
<li>
<a href="#">Coldwell Banker</a>
<ul>
<li><a href="index.php?page=900">Plan van aanpak</a></li>
<li><a href="index.php?page=899">De vier speerpunten</a></li>
</ul>
</li>                           
</ul>

[MueR]

dumpie schreef op donderdag 21 januari 2010 @ 14:39:
Geen topickaping

Welles, dus slotje. Maak even een nieuw topic wil je? Alleen omdat het jQuery is, hoeft het nog niet relevant te zijn.