login  Naam:   Wachtwoord: 
Registreer je!
 Nota's op tutorial:

Tutorials > Javascript > Toon/verberg link met jQuery
Pagina:

Reacties op de tutorial Toon/verberg link met jQuery


Offline  WouterJ
Gepost op: 19 mei 2011 - 22:57
HTML gevorderde

Waarom niet gebruik maken van jQuery: toggle()?

Offline  vinTage
Gepost op: 20 mei 2011 - 11:29
Nieuw lid

dan vind ik slideToggle mooier, maar met toggle of slideToggle wordt niet de anchortext van de link aangepast, dit is dus een goede oplossing.
Ik weet wel dat je die aanpassing van de anchortext ook wel kan doorvoeren bij die toggle's, maar dan is er geen meerwaarde meer tov dit scriptje.

Offline  valles10
Gepost op: 21 mei 2011 - 19:12
HTML interesse

idd, dit is bijna zinloos. Het enige waar deze tutorial goed voor is, is voor aan te tonen HOE het in z'n werk gaat. Voor het uiteindelijke gebruik ervan raad ik ten hoogste toch toggle() of slideToggle() aan.

Offline  Martijn
Gepost op: 23 september 2011 - 19:53
Crew PHP

Dit is ook een heel hoop code voor wat simpels

  1. <script type="text/javascript">
  2. $('a.toggleOff').live('click',function(){
  3. $(.standaardAan').toggle();
  4. $(.standaardUit').toggle();
  5. });
  6. <a href="#" class="standaardAan">Verberg</a>
  7. <a href="#" class="standaardUit">Laat zien</a>
  8.  
  9. <div class="standaardAan">Deze tekst staat standaard aan</div>
  10. <div class="standaardUit">Deze tekst staat standaard UIT</div>

Offline  Thomas
Gepost op: 12 oktober 2013 - 16:26
Moderator

Een aantal opmerkingen:

1. De "globale namespace" wordt vervuild met een functie(naam) "showandhide". Dit hoeft niet, je kunt ook van een anonieme / inline functie gebruik maken, die je in het onclick-event definieert, op dezelfde wijze als bij $(document).ready() gebeurt:

  1. $(document).ready(function() {
  2. $('a.showhide').click(function(e) {
  3. // verdere afhandeling van het click-event hier
  4. });
  5. });


2. Het tonen/verbergen is afhankelijk van "hardcoded" strings ("Verberg", "Laat zien"). Wat nu als iemand deze teksten aanpast? Dan breekt je script, tenzij de implementatie aanpast wordt... Beter is waarschijnlijk dat je controleert of het tekstvak verborgen / zichtbaar is met .is(':hidden') (of met .is('visible')).

3. classes kunnen meerdere keren terugkomen in verschillende (instanties van) HTML-elementen. Met het voorbeeld in de tutorial wordt (dus) de indruk gewekt dat je meerdere van dit soort in- en uitklapblokjes op eenzelfde pagina kunt zetten. Als je dit doet met dit script breekt de functionaliteit ook. Daarnaast vormt de toon/verberg-link en het tekstblok geen "eenheid". Het zijn losse elementen die niet zelf in een wrapper bij elkaar zitten. De JavaScript kan dus ook niet uitzoeken welke link bij welk tekstblok hoort in de opzet die in de tutorial is gebruikt als je deze meerdere keren wilt toepassen, tenzij je uitgaat van een vaste volgorde ofzo, maar dat maakt het weer foutgevoelig. Een structuur met wrappers ziet er bijvoorbeeld als volgt uit (vele varianten mogelijk):

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <script type="text/javascript" src="/pad/naar/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function() {
  6. $('a.showhide').click(function(e) {
  7. // bepaal wrapper
  8. var $wrapper = $(this).parent();
  9. // bepaal tekstblok
  10. var $block = $wrapper.find('div.tekst');
  11.  
  12. // toon/verberg tekstblok of doe een animatie met $block
  13. $block.toggle();
  14.  
  15. // of alles in 1x met
  16. // $(this).parent().find('div.tekst').toggle();
  17. });
  18. });
  19. </head>
  20.  
  21. <div>
  22. <a href="#" class="showhide">toon/verberg</a><br />
  23. <div class="tekst">Dit</div>
  24. </div>
  25. <br />
  26.  
  27. <div>
  28. <a href="#" class="showhide">toon/verberg</a><br />
  29. <div class="tekst">Werkt</div>
  30. </div>
  31. <br />
  32.  
  33. <div>
  34. <a href="#" class="showhide">toon/verberg</a><br />
  35. <div class="tekst">Altijd</div>
  36. </div>
  37. </body>
  38. </html>


Hierbij worden eigenlijk maar 2 aannames gedaan over het type elementen en welke class deze moeten hebben, de wrapper kan in principe van alles zijn:
- de hyperlinks moeten de klasse "showhide" hebben
- het tekstblok is een div met klasse "tekst"

#4 Wellicht is het ook netter om in plaats van "#" "javascript:void(0)" te gebruiken in de hrefs... en er zijn nog andere / mogelijk nettere varianten.

Deze tutorial vormt een hele simpele introductie over wat je allemaal kunt doen met jQuery, maar je kunt het ook op een heleboel manieren "verkeerd" doen. Daarom voelde ik mij genoodzaakt het een en ander toe te lichten, om het (andere) starters niet verkeerd aan te leren.

Pagina:

Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties.
 
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.028s