Hallo,
Ik bouw al enige tijd aan een website die gebaseerd is op een Google map waarbij ik via Javascript markers invoeg met daaraan content gekoppeld uit een json-bestand. Wanneer een gebruiker klikt op een marker verschijnt onder de map een bootstrap accordion panel, die één of meerdere 'projecten' weergeven behorend bij de marker. Elk project panel heeft daarin een aantal tabs met content, die op hun beurt ook weer veranderen in een accordion op een mobiel scherm, een tab-collapse dus.
Dit principe heb ik inmiddels aardig werkende, maar ik stuit nog op een probleem waar ik, na weken van testen, even niet meer zelf uit kom:
Ik krijg namelijk alleen de tab-collapse panels uitgeklapt wanneer ik een blokje code met een check uitvoer en dat voor elke specifieke panel kopieer, terwijl ik dit graag met 1 blokje code wil automatiseren voor alle panels. Bij die check heb ik hier trouwens eerder hulp gehad via een ander topic.
Hieronder een overzichtje van de relevante code:
Zoals hierboven hoop ik duidelijk wordt voer ik dus de functie checkTabState() uit onclick op een marker, waarbij de 3 panels (#collapse0, 1 en 2) netjes uitklappen. Maar ik moet dus telkens dat blokje code kopiëren voor elk nieuw project en dus panel, dat is niet te doen. Dit probeer ik dus te automatiseren via een for-loop maar blijkbaar werkt dit niet. Wie kan me hierbij verder helpen? Alle hulp is welkom, alvast bedankt!
Ik bouw al enige tijd aan een website die gebaseerd is op een Google map waarbij ik via Javascript markers invoeg met daaraan content gekoppeld uit een json-bestand. Wanneer een gebruiker klikt op een marker verschijnt onder de map een bootstrap accordion panel, die één of meerdere 'projecten' weergeven behorend bij de marker. Elk project panel heeft daarin een aantal tabs met content, die op hun beurt ook weer veranderen in een accordion op een mobiel scherm, een tab-collapse dus.
Dit principe heb ik inmiddels aardig werkende, maar ik stuit nog op een probleem waar ik, na weken van testen, even niet meer zelf uit kom:
Ik krijg namelijk alleen de tab-collapse panels uitgeklapt wanneer ik een blokje code met een check uitvoer en dat voor elke specifieke panel kopieer, terwijl ik dit graag met 1 blokje code wil automatiseren voor alle panels. Bij die check heb ik hier trouwens eerder hulp gehad via een ander topic.
Hieronder een overzichtje van de relevante code:
code:
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| function addMarkers(areas) {
//Markers aanmaken...
var theArea = areas[i];
var theProjectCount = theArea.projects_count;
function test() {
//Panels aanmaken...
tabsAndAccordion();
checkTabState(theProjectCount);
}
google.maps.event.addListener(marker, "click", function(event) {
test();
});
}
function tabsAndAccordion() {
$('#myTab0').tabCollapse({
tabsClass: 'hidden-xs',
accordionClass: 'visible-xs'
});
$('#myTab1').tabCollapse({
tabsClass: 'hidden-xs',
accordionClass: 'visible-xs'
});
$('#myTab2').tabCollapse({
tabsClass: 'hidden-xs',
accordionClass: 'visible-xs'
});
//etc...
};
function checkTabState(theProjectCount) {
$('#collapse0').on('shown.bs.collapse', function () {
var tc = $('#myTab0').data('bs.tabcollapse');
tc.checkState();
});
$('#collapse1').on('shown.bs.collapse', function () {
var tc = $('#myTab1').data('bs.tabcollapse');
tc.checkState();
});
$('#collapse2').on('shown.bs.collapse', function () {
var tc = $('#myTab2').data('bs.tabcollapse');
tc.checkState();
});
//etc...
//Een paar pogingen om te automatiseren via een loop, werkt niet:
/* for(i = 0; i < theProjectCount; i++) {
$('#collapse' + i).on('shown.bs.collapse', function () {
var tc = $('#myTab' + i).data('bs.tabcollapse');
tc.checkState();
});
} */
/* var tc = [];
for(i = 0; i < theProjectCount; i++) {
function pushTest(tabnr) {
var result = $('#myTab' + tabnr).data('bs.tabcollapse');
tc.push(result);
tc[tabnr].checkState();
};
$('#collapse' + i).on('shown.bs.collapse', pushTest(i));
}; */
}; |
Zoals hierboven hoop ik duidelijk wordt voer ik dus de functie checkTabState() uit onclick op een marker, waarbij de 3 panels (#collapse0, 1 en 2) netjes uitklappen. Maar ik moet dus telkens dat blokje code kopiëren voor elk nieuw project en dus panel, dat is niet te doen. Dit probeer ik dus te automatiseren via een for-loop maar blijkbaar werkt dit niet. Wie kan me hierbij verder helpen? Alle hulp is welkom, alvast bedankt!
/u/89193/crop5913059561374.png?f=community)
:strip_exif()/u/53522/crop583d477015a24.gif?f=community)
Ook is een function binnen een function niet de bedoeling, denk ik? Maar goed, een for loop is niet nodig als je de selector op basis van een class gaat maken. 
/u/123790/crop563cad3a10a9c_cropped.png?f=community)
Anders is het wel logisch, dat je niets terugkrijgt namelijk. #Mytabundefined zal je vast niet hebben. Maar nogmaals, voorkom duplicate code en maak de selector class-based. Dan hoeft het niet gelijk ook te werken, zoals je ook aangeeft, maar dan betekend dat dat het in de logica niet goed zit en de code dus niet doet wat je eigenlijk wel verwacht.