Inkorten jquery-code
ik gebruik jquery omdat dit simpel is om mee om te gaan en de lengte van de uiteindelijke code minimaal is. Nu heb ik een script gemaakt, maar dit is nogal lang in lengte.. Zouden jullie willen kijken of ik dit kan inkorten, zodat het er wat overzichtelijker uitziet?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
$(document).ready(function(){
// Het weergeven van de leden per letter.
$(".gegevens").hide();
$('.letter-keuze ul li a.letter').css({'opacity': '0.5'});
$("td.gegevens.senioren:first").show();
$("td.gegevens.jeugd:first").show();
$('.letter-keuze ul li:first-child a').animate({'opacity' : '1.0', 'padding-left': '20px'});
$('#content').css({'min-height':(($('.ledenlijst td:first-child').height())+25)+'px'});
$('.ledenlijst.senioren .letter').click(function(event) {
event.preventDefault();
$('.ledenlijst.senioren .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
$(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
var tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));
$('#content').css({'height':((tablesenioren.height())+15)+'px'});
$('#content').css({'min-height':(($('.ledenlijst.senioren td:first-child').height())+25)+'px'});
$('#footer').css({'margin-top':(($(document).height())-25)+'px'});
$('.ledenlijst.senioren .gegevens').fadeOut(100);
$('.ledenlijst.senioren #div-' + $(this).attr('id')).delay(100).fadeIn(250);
});
$('.ledenlijst.jeugd .letter').click(function(event) {
event.preventDefault();
$('.ledenlijst.jeugd .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
$(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
var tablejeugd = $('.ledenlijst.jeugd #div-' + $(this).attr("id"));
$('#content').css({'height':((tablejeugd.height())+15)+'px'});
$('#content').css({'min-height':(($('.ledenlijst.jeugd td:first-child').height())+25)+'px'});
$('#footer').css({'margin-top':(($(document).height())-25)+'px'});
$('.ledenlijst.jeugd .gegevens').fadeOut(100);
$('.ledenlijst.jeugd #div-' + $(this).attr('id')).delay(100).fadeIn(250);
});
});
</script>
$(document).ready(function(){
// Het weergeven van de leden per letter.
$(".gegevens").hide();
$('.letter-keuze ul li a.letter').css({'opacity': '0.5'});
$("td.gegevens.senioren:first").show();
$("td.gegevens.jeugd:first").show();
$('.letter-keuze ul li:first-child a').animate({'opacity' : '1.0', 'padding-left': '20px'});
$('#content').css({'min-height':(($('.ledenlijst td:first-child').height())+25)+'px'});
$('.ledenlijst.senioren .letter').click(function(event) {
event.preventDefault();
$('.ledenlijst.senioren .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
$(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
var tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));
$('#content').css({'height':((tablesenioren.height())+15)+'px'});
$('#content').css({'min-height':(($('.ledenlijst.senioren td:first-child').height())+25)+'px'});
$('#footer').css({'margin-top':(($(document).height())-25)+'px'});
$('.ledenlijst.senioren .gegevens').fadeOut(100);
$('.ledenlijst.senioren #div-' + $(this).attr('id')).delay(100).fadeIn(250);
});
$('.ledenlijst.jeugd .letter').click(function(event) {
event.preventDefault();
$('.ledenlijst.jeugd .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
$(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
var tablejeugd = $('.ledenlijst.jeugd #div-' + $(this).attr("id"));
$('#content').css({'height':((tablejeugd.height())+15)+'px'});
$('#content').css({'min-height':(($('.ledenlijst.jeugd td:first-child').height())+25)+'px'});
$('#footer').css({'margin-top':(($(document).height())-25)+'px'});
$('.ledenlijst.jeugd .gegevens').fadeOut(100);
$('.ledenlijst.jeugd #div-' + $(this).attr('id')).delay(100).fadeIn(250);
});
});
</script>
Alvast bedankt!
Dat kost allemaal erg veel tijd omdat per aanroep eerst de hele DOM (de hele HTML code) doorzocht moet worden en die gevonden moet worden.
Beter is het om dit element dan op te slaan in een variabele:
Code (php)
1
2
3
4
2
3
4
var content = $('#content');
content.css(...);
content.css(...);
content.css(...);
content.css(...);
Of misschien nog wel beter, gewoon alle methods bij 1 selector koppelen:
Code (php)
1
$('#content').css(...).css(...);
Van de rest is er zo niet heel veel op aan te merken. Maar misschien als je een online voorbeeldje laat zien dat het wel zo is, want er staan soms dingen in die volgens mij wel makkelijker zouden moeten kunnen.
maar zit je met je kliks waar door je hem herhaalt. nu heeft daar jqeury daar blind() voor.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// de div waar op geklikt moet worden
$(".ledenlijst.senioren .letter").bind({
click: function(){
$('.ledenlijst.senioren .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
$(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
var tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));
$('#content').css({'height':((tablesenioren.height())+15)+'px'});
$('#content').css({'min-height':(($('.ledenlijst.senioren td:first-child').height())+25)+'px'});
$('#footer').css({'margin-top':(($(document).height())-25)+'px'});
$('.ledenlijst.senioren .gegevens').fadeOut(100);
$('.ledenlijst.senioren #div-' + $(this).attr('id')).delay(100).fadeIn(250);
}
});
$(".ledenlijst.senioren .letter").bind({
click: function(){
$('.ledenlijst.senioren .letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
$(this).animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
var tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));
$('#content').css({'height':((tablesenioren.height())+15)+'px'});
$('#content').css({'min-height':(($('.ledenlijst.senioren td:first-child').height())+25)+'px'});
$('#footer').css({'margin-top':(($(document).height())-25)+'px'});
$('.ledenlijst.senioren .gegevens').fadeOut(100);
$('.ledenlijst.senioren #div-' + $(this).attr('id')).delay(100).fadeIn(250);
}
});
De code wordt dan:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(document).ready(function(){
var content = $('#content');
// Het weergeven van de leden per letter.
$(".gegevens").hide();
$('.letter-keuze ul li a.letter').css({'opacity': '0.5'});
$("td.gegevens.senioren:first, td.gegevens.jeugd:first").show();
$('.letter-keuze ul li:first-child a').animate({'opacity' : '1.0', 'padding-left': '20px'});
content.css({'min-height':(($('.ledenlijst td:first-child').height())+25)+'px'});
$('.ledenlijst.senioren, .ledenlijst.jeugd').on('click', '.letter', function() {
event.preventDefault();
var $this = $(this),
ledenlijst = $(this).parent('.ledenlijst'),
tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));
$this.find('.letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
$this.animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
content.css({'height': (tablesenioren.height() + 15) + 'px'})
.css({'min-height':(ledenlijst.find('td:first-child').height() + 25) + 'px'});
$('#footer').css({'margin-top': ($(document).height() - 25) + 'px'});
ledenlijst.find('.gegevens').fadeOut(100);
ledenlijst.find('#div-' + $(this).attr('id')).delay(100).fadeIn(250);
});
});
var content = $('#content');
// Het weergeven van de leden per letter.
$(".gegevens").hide();
$('.letter-keuze ul li a.letter').css({'opacity': '0.5'});
$("td.gegevens.senioren:first, td.gegevens.jeugd:first").show();
$('.letter-keuze ul li:first-child a').animate({'opacity' : '1.0', 'padding-left': '20px'});
content.css({'min-height':(($('.ledenlijst td:first-child').height())+25)+'px'});
$('.ledenlijst.senioren, .ledenlijst.jeugd').on('click', '.letter', function() {
event.preventDefault();
var $this = $(this),
ledenlijst = $(this).parent('.ledenlijst'),
tablesenioren = $('.ledenlijst.senioren #div-' + $(this).attr("id"));
$this.find('.letter-keuze a.letter').animate({'opacity': '0.5', 'padding-left': '8px'}, 250);
$this.animate({'opacity': '1.0', 'padding-left': '20px'}, 250);
content.css({'height': (tablesenioren.height() + 15) + 'px'})
.css({'min-height':(ledenlijst.find('td:first-child').height() + 25) + 'px'});
$('#footer').css({'margin-top': ($(document).height() - 25) + 'px'});
ledenlijst.find('.gegevens').fadeOut(100);
ledenlijst.find('#div-' + $(this).attr('id')).delay(100).fadeIn(250);
});
});
@Thomas, kijk eens naar de code die ik hierboven heb gegeven. Naar mijn mening zou dit moeten werken en is het een stuk overzichtelijker en sneller.
Ik zal eens een voorbeeldpagina in elkaar zetten zodat jullie online kunnen zien hoe het script werkt.
Toevoeging op 31/05/2012 15:57:35:
Ik heb eventjes snel een voorbeeldpagina online gezet: http://www.smash.nl/voorbeeld.php