HTML gevorderde |
|
Als je jQuery toch al gebruikt, gebruik het dan in je hele script:
<a href="#" class="show-link" data-target="#div_header"><img ...></a>
<script>
jQuery(function ($) {
$('.show-link').on('click', function (e) {
var target = $($(this).data('target'));
target.toggle();
});
});
</script>
<a href="#" class="show-link" data-target="#div_header"><img ...></a> jQuery(function ($) { $('.show-link').on('click', function (e) { var target = $($(this).data('target')); target.toggle(); }); });
.toggle() kun je dan snelheid meegeven, bijv. .toggle('slow') of een specifiek aantal miliseconden: .toggle(200)
Nog een snelheidoptimalistie tip: Als je nu een paar keer op de link klikt moet JavaScript telkens alle elementen in de HTML doorzoeken of hij #div_header kan vinden. Je kan begrijpen dat dat best wel wat tijd kost. Het is beter om deze elementen te cachen en slechts de 1e keer op te zoeken:
jQuery(function ($) {
var cached = {}; // hierin gaan we de elementen vasthouden
$('.show-link').on('click', function (e) {
var target = $(this).data('target');
if (cached[target]) { // als hij al gecached is
target = cached[target]; // zoek hem niet opnieuw op, gebruik de cache
} else { // de eerste keer
target = cached[target] = $(target); // zoek element op en cache hem
}
target.toggle();
});
});
jQuery(function ($) { var cached = {}; // hierin gaan we de elementen vasthouden $('.show-link').on('click', function (e) { var target = $(this).data('target'); if (cached[target]) { // als hij al gecached is target = cached[target]; // zoek hem niet opnieuw op, gebruik de cache } else { // de eerste keer target = cached[target] = $(target); // zoek element op en cache hem } target.toggle(); }); });
|