jQuery laad niet goed + hash problemen
Ik ben bezig met een klein klantenservice / FAQ systeem. In het overzicht zie je alle categoriën en daaronder de dingen die erbij horen.
Wanneer een persoon op een link onder de categorie drukt wordt de URL veranderd naar bijvoorbeeld domein.nl/klantenservice#bestellingen/verzendkosten.
Als alleerst stuit ik op het probleem dat de jQuery Click functie vaak alleen werkt na het refreshen van de pagina, heel erg vreemd. Hoe kan dit?
Daarnaast zit ik met een ander probleem. Volgens mij klopt mijn logica niet helemaal. Want ik moet de pagina refreshen wil ik naar een andere categorie kunnen. De string 'boxId' moet dus direct worden aangepast, maar hoe?
Verder ben ik benieuwd of de rest van de code een beetje klopt, ben sinds een paar jaar weer met javascript bezig, haha.
Hoop dat het een beetje duidelijk is. Alvast bedankt!
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
48
49
50
51
52
53
54
55
56
57
58
59
60
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
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript">
// Eerste letter van een string in hoofdletter veranderen
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
$(document).ready(function() {
// Hash uit de URL trekken
var hash = location.hash.split('#')[1];
// Alleen het gedeelte voor de slash (#'bestellingen'/verzendkosten) gebruiken
var boxId = hash.substring(0, hash.indexOf('/'));
// Handler voor het item overzicht
$('.itemOverviewBox ul li').click(function() {
$('#itemsOverview').fadeOut('fast', function() {
$('#itemsContent ').fadeIn('fast');
$('#itemsContent #' + boxId).show();
});
// Titel van de box vervangen
$('#itemsContent .boxTitle').html(capitaliseFirstLetter(boxId));
});
// Terug naar het overzicht 'button'
$('#backToOverview').click(function() {
$('#itemsContent').fadeOut('fast', function() {
$('#itemsContent').hide();
$('#itemsOverview').fadeIn('fast');
});
// Even de hash leegmaken
window.location.hash = '';
});
// Kijken of er een hash aanwezig is in de URL
// Zoja, die FAQ pagina laten zien en anders het overzicht
if (window.location.hash) {
$('#itemsOverview').hide();
$('#itemsContent ').show();
$('#itemsContent #' + boxId).show();
}
// Handler voor het in- en uitvouwen van de FAQ items
$('itemContentBox span').each(function() {
var tis = $(this), state = false, answer = tis.next('p').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active', state);
});
});
$('.itemContentBox span').click(function() {
$(this).next('p').slideToggle(250);
$(this).toggleClass('close');
});
});
</script>
// Eerste letter van een string in hoofdletter veranderen
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
$(document).ready(function() {
// Hash uit de URL trekken
var hash = location.hash.split('#')[1];
// Alleen het gedeelte voor de slash (#'bestellingen'/verzendkosten) gebruiken
var boxId = hash.substring(0, hash.indexOf('/'));
// Handler voor het item overzicht
$('.itemOverviewBox ul li').click(function() {
$('#itemsOverview').fadeOut('fast', function() {
$('#itemsContent ').fadeIn('fast');
$('#itemsContent #' + boxId).show();
});
// Titel van de box vervangen
$('#itemsContent .boxTitle').html(capitaliseFirstLetter(boxId));
});
// Terug naar het overzicht 'button'
$('#backToOverview').click(function() {
$('#itemsContent').fadeOut('fast', function() {
$('#itemsContent').hide();
$('#itemsOverview').fadeIn('fast');
});
// Even de hash leegmaken
window.location.hash = '';
});
// Kijken of er een hash aanwezig is in de URL
// Zoja, die FAQ pagina laten zien en anders het overzicht
if (window.location.hash) {
$('#itemsOverview').hide();
$('#itemsContent ').show();
$('#itemsContent #' + boxId).show();
}
// Handler voor het in- en uitvouwen van de FAQ items
$('itemContentBox span').each(function() {
var tis = $(this), state = false, answer = tis.next('p').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active', state);
});
});
$('.itemContentBox span').click(function() {
$(this).next('p').slideToggle(250);
$(this).toggleClass('close');
});
});
</script>
Gewijzigd op 26/05/2014 17:37:54 door PHP Harm
