jquery/javascript顯示鏈接使用html日期

我想要獲得鏈接顯示依賴於HTML中的時間屬性是可能的嗎？或者有更好的方法來做到這一點。我瞭解使用此客戶端的限制（但它不應該是用戶的一個問題） HTMLjquery/javascript顯示鏈接使用html日期

var now = new Date(); 
 

 
if(now > datetime) // today is after linkdate 
 
{ 
 
    $('.datelink').show(); 
 
}

body { 
 
    color:red; 
 
} 
 

 
.datelink{ 
 
    display:none; 
 
}

<li>WHITBY <time datetime="2015-11-1">November 1st 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li> 
 
    <li>EASINGWOLD <time datetime="2015-11-2">November 2nd 10.34</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li> 
 
    <li>DARLINGTON <time datetime="2015-11-15">November 15th 9.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li> 
 
    <li>RIPON CITY <time datetime="2015-11-16">November 16th 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li> 
 
    <li>ROMANBY <time datetime="2015-11-20">November 20th 13.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li> 
 
    <li>KIRKBYMOORSIDE <time datetime="2015-11-21">November 21st</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li> 
 
    <li>BEDALE <time datetime="2015-11-22">November 22nd 8.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li> 
 
    <li>CATTERICK <time datetime="2015-11-23">November 23rd 9.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> </li>

是有可能得到從HTML到了「日期時間」如果語句在jQuery中？

來源

2015-11-20 Greyhounddad

您可以使用下面的代碼：

//store the current datetime in a global variable 
 
var now = new Date(); 
 

 
//iterate through each time element 
 
$("ul li time").each(function() { 
 
    //get the date of each one from datetime attribute 
 
    var dateTime = Date.parse($(this).attr("datetime")); 
 
    //compare with the current datetime as in OP 
 
    if (now > dateTime) // today is after linkdate 
 
    { 
 
    //shows the elements that match the above condition 
 
    $(this).next('a.datelink').show(); 
 
    } 
 
});

body { 
 
    color: red; 
 
} 
 
.datelink { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>WHITBY 
 
    <time datetime="2015-11-1">November 1st 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
 
    </li> 
 
    <li>EASINGWOLD 
 
    <time datetime="2015-11-2">November 2nd 10.34</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
 
    </li> 
 
    <li>DARLINGTON 
 
    <time datetime="2015-11-15">November 15th 9.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
 
    </li> 
 
    <li>RIPON CITY 
 
    <time datetime="2015-11-16">November 16th 11.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
 
    </li> 
 
    <li>ROMANBY 
 
    <time datetime="2015-11-20">November 20th 13.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
 
    </li> 
 
    <li>KIRKBYMOORSIDE 
 
    <time datetime="2015-11-21">November 21st</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
 
    </li> 
 
    <li>BEDALE 
 
    <time datetime="2015-11-22">November 22nd 8.30</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
 
    </li> 
 
    <li>CATTERICK 
 
    <time datetime="2015-11-23">November 23rd 9.00</time><a href="bbc.co.uk" class="datelink"> SOME LINK </a> 
 
    </li> 
 
</ul>

參考

2015-11-20 14:13:14

Alex的回答很好。我將添加一個可選項，這取決於HTML的結構 - 可能更易於使用，因爲它更直接地在鏈接標記本身上運行。首先，一個數據屬性（例如數據的日期時間）添加到鏈接，指定日期爲每個鏈接：

<a href="bbc.co.uk" class="datelink" data-datetime="2015-11-1"> SOME LINK </a>

全部樣品HTML會是這樣（排長=難以SO讀取）：

<li>WHITBY <time datetime="2015-11-1">November 1st 11.00</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-1"> SOME LINK </a> </li> 
<li>EASINGWOLD <time datetime="2015-11-2">November 2nd 10.34</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-2"> SOME LINK </a> </li> 
<li>DARLINGTON <time datetime="2015-11-15">November 15th 9.30</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-15"> SOME LINK </a> </li> 
<li>RIPON CITY <time datetime="2015-11-16">November 16th 11.00</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-16"> SOME LINK </a> </li> 
<li>ROMANBY <time datetime="2015-11-20">November 20th 13.00</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-20"> SOME LINK </a> </li> 
<li>KIRKBYMOORSIDE <time datetime="2015-11-21">November 21st</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-21"> SOME LINK </a> </li> 
<li>BEDALE <time datetime="2015-11-22">November 22nd 8.30</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-22"> SOME LINK </a> </li> 
<li>CATTERICK <time datetime="2015-11-23">November 23rd 9.00</time><a href="bbc.co.uk" class="datelink" data-datetime="2015-11-23"> SOME

然後運行這樣的事情在$（文件）。就緒或類似：

var now = new Date(); 
$('.datelink').each(function() 
{ 
    var $link = $(this); 
    if (now > Date.parse($link.data('datetime'))) { 
     $link.show(); 
    } else { 
     $link.hide(); 
    } 
})

來源

2015-11-20 14:29:21 Culme

我想給一個jQuery自由選擇太:-)

代碼：

var now = new Date(), 
    dateTimeSelector = document.querySelectorAll('time'), 
    dateLinkSelector = document.querySelectorAll('.datelink'), 
    i; 

for (i = 0; i < dateTimeSelector.length; ++i) { 
    dateTime = Date.parse(dateTimeSelector[i].getAttribute('datetime')); 
    console.log(dateTime + now); 
    if (now > dateTime) { 
     dateLinkSelector[i].style.display = "inline"; 
    } 
}

鏈接：

http://jsfiddle.net/link2twenty/0uu7z98h/3/

來源

2015-11-20 14:38:04

jquery/javascript顯示鏈接使用html日期

回答

相關問題