data attributes op dezelfde pagina
Ik heb meerdere 'data-time' attributen op mijn pagina staan maar daar gaat het fout in mijn jquery script.
Onderstaande HTML gaat dit verduidelijken. Ik heb dus een eerste blok met data-time attribute 17nov en een tweede blok met data-time attribute van 18nov:
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
<!-- Eerste blok -->
<div class="kf_event_list_wrap">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<!--EVENT LIST THUMB Start-->
<div class="kf_event_list_thumb">
<figure>
<img src="extra-images/event_1.jpg" alt=""/>
<div id="defaultCountdown" data-time="nov 17, 2016 12:00:00" class="defaultCountdown"></div>
</figure>
</div>
<!--EVENT LIST THUMB END-->
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<!--EVENT LIST DES Start-->
<div class="kf_event_list_des">
<h4><a href="#">University <span>Convocation</span></a></h4>
<p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p>
<ul class="kf_event_list_links">
<li><i class="fa fa-user"></i><a href="#">John Doe</a></li>
<li><i class="fa fa-calendar"></i><a href="#">Saturday 10:00 AM</a></li>
</ul>
</div>
<!--EVENT LIST DES END-->
</div>
</div>
</div>
<!-- 2de blok -->
<div class="kf_event_list_wrap">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<!--EVENT LIST THUMB Start-->
<div class="kf_event_list_thumb">
<figure>
<img src="extra-images/event_1.jpg" alt=""/>
<div id="defaultCountdown" data-time="nov 18, 2016 12:00:00" class="defaultCountdown"></div>
</figure>
</div>
<!--EVENT LIST THUMB END-->
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<!--EVENT LIST DES Start-->
<div class="kf_event_list_des">
<h4><a href="#">University <span>Convocation</span></a></h4>
<p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p>
<ul class="kf_event_list_links">
<li><i class="fa fa-user"></i><a href="#">John Doe</a></li>
<li><i class="fa fa-calendar"></i><a href="#">Saturday 10:00 AM</a></li>
</ul>
</div>
<!--EVENT LIST DES END-->
</div>
</div>
</div>
<div class="kf_event_list_wrap">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<!--EVENT LIST THUMB Start-->
<div class="kf_event_list_thumb">
<figure>
<img src="extra-images/event_1.jpg" alt=""/>
<div id="defaultCountdown" data-time="nov 17, 2016 12:00:00" class="defaultCountdown"></div>
</figure>
</div>
<!--EVENT LIST THUMB END-->
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<!--EVENT LIST DES Start-->
<div class="kf_event_list_des">
<h4><a href="#">University <span>Convocation</span></a></h4>
<p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p>
<ul class="kf_event_list_links">
<li><i class="fa fa-user"></i><a href="#">John Doe</a></li>
<li><i class="fa fa-calendar"></i><a href="#">Saturday 10:00 AM</a></li>
</ul>
</div>
<!--EVENT LIST DES END-->
</div>
</div>
</div>
<!-- 2de blok -->
<div class="kf_event_list_wrap">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-5">
<!--EVENT LIST THUMB Start-->
<div class="kf_event_list_thumb">
<figure>
<img src="extra-images/event_1.jpg" alt=""/>
<div id="defaultCountdown" data-time="nov 18, 2016 12:00:00" class="defaultCountdown"></div>
</figure>
</div>
<!--EVENT LIST THUMB END-->
</div>
<div class="col-lg-6 col-md-7 col-sm-7">
<!--EVENT LIST DES Start-->
<div class="kf_event_list_des">
<h4><a href="#">University <span>Convocation</span></a></h4>
<p>Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisie tiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam.</p>
<ul class="kf_event_list_links">
<li><i class="fa fa-user"></i><a href="#">John Doe</a></li>
<li><i class="fa fa-calendar"></i><a href="#">Saturday 10:00 AM</a></li>
</ul>
</div>
<!--EVENT LIST DES END-->
</div>
</div>
</div>
De bijhorende jquery die werkt maar de klok neemt enkel de eerste blok data-time mee en de 2de blok krijgt dus dezelfde aftelling als de eerste blok alhoewel de data-time niet dezelfde is. Hoe kan ik dit oplossen?
Code (php)
1
2
3
4
5
2
3
4
5
if($('.defaultCountdown').length){
var date1 = $('#defaultCountdown').data('time');
var date = new Date(date1);
$('.defaultCountdown').countdown({ until: date});
}
var date1 = $('#defaultCountdown').data('time');
var date = new Date(date1);
$('.defaultCountdown').countdown({ until: date});
}
Alleen weet ik niet hoe dit aan te pakken.
Toevoeging op 03/09/2016 12:07:16:
Het zal iets in die zin moeten zijn denk ik. Alleen krijg ik het niet werkend.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
if($('.defaultCountdown').length){
$('[data-time]').each(function() {
var $this = $('.defaultCountdown'), finalDate = $(this).data('time');
$this.countdown(finalDate, function(event) {
//$this.html(event.strftime('%D days %H:%M:%S'));
var date = new Date(finalDate);
$('.defaultCountdown').countdown({ until: date});
});
});
}
$('[data-time]').each(function() {
var $this = $('.defaultCountdown'), finalDate = $(this).data('time');
$this.countdown(finalDate, function(event) {
//$this.html(event.strftime('%D days %H:%M:%S'));
var date = new Date(finalDate);
$('.defaultCountdown').countdown({ until: date});
});
});
}
Gewijzigd op 03/09/2016 12:33:12 door Frank Nietbelangrijk
Toevoeging op 04/09/2016 13:00:33:
Heeft iemand een idee hoe dit verder aan te pakken? Ik heb al heel wat zelf zitten proberen maar niks dat werkt. De laatst geposte javascript code blijkt ook niet te werken.