可點擊的div根據當前日期

Question

我有一個頁面有幾個div，包含帶有鏈接的圖像，我想從基於日期的不可點擊變成可單擊的圖像。 例如 - 我有5個5天的div（01.03.2016,02.03.2016,03.03.2016,04.03.2016,05.03.2016）。在這些div裏面我有鏈接的圖像。

於2016年3月1日 - 只有DIV 1是點擊，所有其他人不

於2016年3月2日 - 只有DIV1和DIV2是點擊，所有其他不 等..

上2016年3月5日 - 所有五個div的是點擊

預先感謝您

Answer 1

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>

Answer 2

我會使用日期比較。也許這樣的事情：

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 這裏有一個JSFiddle

Answer 3

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> 

jQuery中禁用點擊

$("#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'); 
    } 

或者在jQuery中禁用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'); 
    }