javascript - 使用 html 日期的 jquery/javascript 显示链接

Question

我正在尝试获取链接以根据 html 中的时间属性显示这可能吗？或者有更好的方法吗？我了解使用此客户端的局限性(但这对用户来说应该不是问题)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 中的 if 语句？

Answer 1

您可以使用以下代码:

//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>

引用资料

Date.parse()

.next()

.each()