J'ai une page avec plusieurs divs, contenant une image avec un lien, que je veux passer de non cliquable à cliquable en fonction de la date. Par exemple - J'ai 5 divisions pendant 5 jours (01.03.2016, 02.03.2016, 03.03.2016, 04.03.2016, 05.03.2016). A l'intérieur de ces divs, j'ai une image avec un lien.

Au 01.03.2016 - seule la div 1 doit être cliquable, toutes les autres non

Le 02.03.2016 - seuls div1 et div2 doivent être cliquables, tous les autres non et etc ...

Le 05.03.2016 - les cinq divisions doivent être cliquables

Merci d'avance

-3
ataman79 7 mars 2016 à 15:15

3 réponses

Meilleure réponse
var divs = document.getElementsByClassName("date");

for (i = 0 ; i < divs.length ; i++) {
  divs[i].style.pointerEvents = 'none';
}

for (i = 0 ; i < divs.length ; i++) {  
  var divDate = divs[i].id.split('.');
  var date = new Date(divDate[2], divDate[1] - 1, divDate[0]);
  
  if (date <= new Date()) {
    divs[i].style.pointerEvents = 'auto';
  }
}
<div class="date" id="01.03.2016">01.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
<div class="date" id="02.03.2016">02.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
<div class="date" id="03.03.2016">03.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
<div class="date" id="04.03.2016">04.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
<div class="date" id="09.03.2016">09.03.2016 <a href="ihttp://google.com"><img src="images/image1.jpg" alt="Google Image" width="138" height="138" class="img_rounded" /></a></div>
0
Munawir 8 mars 2016 à 03:00

J'utiliserais la comparaison des dates. Peut-être quelque chose comme ça:

HTML

<div class="date">01.03.2016</div>
<div class="date">02.03.2016</div>
<div class="date">03.03.2016</div>
<div class="date">04.03.2016</div>
<div class="date">05.03.2016</div>

JavaScript:

var elms = document.getElementsByClassName("date");
for (var i = 0 ; i < elms.length ; i++)
{
   var el = elms[i];
   var dmy = el.innerHTML.split('.');
   var date = new Date(dmy[2], dmy[1] - 1, dmy[0]);
   if (date <= new Date()) {
      el.style.backgroundColor = "yellow";
      el.onclick = function () {
         alert("you clicked on " + this.innerHTML)        
      };
   }
}

DEMO Voici un JSFiddle

0
remdevtec 7 mars 2016 à 12:36

HTML

 <div class="date" id="First">01.03.2016</div>
 <div class="date all" id="Second">02.03.2016</div>
 <div class="date all three two"   id="Third">03.03.2016</div>
 <div class="date all three two one"   id="Fourth">04.03.2016</div>
 <div class="date all three two one zero"  id="Fifth">05.03.2016</div>

Dans JQuery, désactivez le clic

  $("#First").click(function(){
     $(".all ").off('click');
   }
  $("#Second").click(function(){
     $(".three ")off('click');
   }
  $("#Third").click(function(){
     $(".two")off('click');
   }
  $("#Fourth").click(function(){
     $(".one").off('click');
   }
  $("#Fifth").click(function(){
     $(".zero")off('click');
   }

OU Dans JQuery Désactiver la div

  $("#First").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".all ").attr('disabled','disabled');
   }
  $("#Second").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".three ").attr('disabled','disabled');
   }
  $("#Third").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".two").attr('disabled','disabled');
   }
  $("#Fourth").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".one").attr('disabled','disabled');
   }
  $("#Fifth").click(function(){
     $(".date").removeAttr('disabled','disabled');
     $(".zero").attr('disabled','disabled');
   }
0
DAre G 8 mars 2016 à 03:57