Question

I have been strugling with this all evening.

http://codepen.io/Casfan/pen/xOPKYE?editors=1111

I have a list of items

  <ul> <li><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Blackwell Grange <time datetime="2016-07-23">23/07/2016</time> 12:30 *Prudhoe, Garesfield <a href="#" class ="datelink">THIS LINK SHOULD SHOW NOW</a> 


   <li><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Blackwell Grange <time datetime="2016-07-23">23/07/2016</time> 12:30 *Prudhoe, Garesfield <a href="#" class ="datelink">THIS LINK SHOULD SHOW NOW</a> 
<a class="resultdate" id="tempresults" href='https://www.dropbox.com/sh/4gxqq4pej9c58oa/AAChi69GfE1Mf58auVeV5jf9a?dl=0'>THIS LINK SHOULD SHOW IF THE DATE IN DATE TIME IS SET TO THE PAST</a></li>
... etc
</ul>

css

.datelink {
    display:none;
}

.resultdate {
  display:none;
}

So the links are hidden to start with and then using coffeescript because Im doing this in RoR I have

$(document).ready ->
now = undefined
now = new Date

$('ul li time').each ->
    dateTime = Date.parse($(this).attr('datetime'))
    startdate = new Date(dateTime)
    startdate.setDate startdate.getDate() - 14
    enddate = new Date(dateTime)
    enddate.setDate enddate.getDate() - 2
    if now > startdate and now < enddate
        $(this).next('a.datelink').show()
return

$('ul li time').each ->
  dateTime = Date.parse($(this).attr('datetime'))
  fixturedate = new Date(dateTime)
  if now > fixturedate
   $( "#tempresults" ).show()
return  
return

I am using a time datetime atribute in the html to set the date for the fixture The first function in there works and shows the link when we are between the two dates. The second function I want to display the other link with either the class of resultdate or id of tempresults if the date is in the past only one of the list items have this class or id.

I think the logic works when I only have one of the functions, when I have them both the bottom one does not work. I have tried combinding it into one function but then only the top if statement works. I have tried using $(this).next('a.resultdate').show()

What am I doing wrong?

Answer 1

Your last call is $( "#tempresults" ).show(). How many links have the id #tempresults ?

If you have more than one of them, perhaps a $(this).child(".resultdate").show() would target the right ones.

Answer 2

You don't need the returns. It is exiting after the first loop. see my forked pen

$(document).ready ->
  now = undefined
  now = new Date

  $('ul li time').each ->
    dateTime = Date.parse($(this).attr('datetime'))
    startdate = new Date(dateTime)
    startdate.setDate startdate.getDate() - 14
    enddate = new Date(dateTime)
    enddate.setDate enddate.getDate() - 2
    if now > startdate and now < enddate
      $(this).next('a.datelink').show()

  $('ul li time').each ->
    dateTime = Date.parse($(this).attr('datetime'))
    fixturedate = new Date(dateTime)
    if now > fixturedate
      $( "#tempresults" ).show()

Change link depending on date

2 个答案: