data attributes op dezelfde pagina

Door Brecht S op 03-09-2016 09:42

2.270 views

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:


<!-- 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?


	if($('.defaultCountdown').length){
		var date1 = $('#defaultCountdown').data('time');
		var date = new Date(date1);
		$('.defaultCountdown').countdown({ until: date}); 
	}

- SanThe -

03-09-2016 09:46

Je hebt nu twee keer hetzelfde id="defaultCountdown".

Brecht S

03-09-2016 10:15

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.

[size=xsmall]Toevoeging op 03/09/2016 12:07:16:[/size]

Het zal iets in die zin moeten zijn denk ik. Alleen krijg ik het niet werkend.


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

03-09-2016 12:30 gewijzigd op 03-09-2016 12:33

De id attributen moeten allemaal uniek zijn in de HTML in tegenstelling tot de class attributen die wel hergebruikt mogen worden.

Brecht S

03-09-2016 14:04

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.

[size=xsmall]Toevoeging op 04/09/2016 13:00:33:[/size]

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.

Reageren

Inloggen om te reageren