data attributes op dezelfde pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Brecht S

Brecht S

03/09/2016 09:42:23
Quote Anchor link
Ik heb een script dat ik gebruik: http://keith-wood.name/countdown.html
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!-- 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>



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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
    if($('.defaultCountdown').length){
        var date1 = $('#defaultCountdown').data('time');
        var date = new Date(date1);
        $('.defaultCountdown').countdown({ until: date});
    }
 
PHP hulp

PHP hulp

19/01/2022 15:42:36
 
- SanThe -

- SanThe -

03/09/2016 09:46:30
Quote Anchor link
Je hebt nu twee keer hetzelfde id="defaultCountdown".
 
Brecht S

Brecht S

03/09/2016 10:15:05
Quote Anchor link
Ja 2x hetzelfde ID inderdaad. Maar wel een verschillende date-time attribute. Dus de jquery zou moeten zien blok per blok wat in die date-time staat en die gebruiken voor de timer.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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});
   });
});
}
 
Frank Nietbelangrijk

Frank Nietbelangrijk

03/09/2016 12:30:41
Quote Anchor link
De id attributen moeten allemaal uniek zijn in de HTML in tegenstelling tot de class attributen die wel hergebruikt mogen worden.
Gewijzigd op 03/09/2016 12:33:12 door Frank Nietbelangrijk
 
Brecht S

Brecht S

03/09/2016 14:04:34
Quote Anchor link
De ID's zijn overal dezelfde. Ik heb anders geen idee hoe ik dit moet doen aangezien die HTML een lijst is met ongekende items die uit een database moet komen.

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.