My jquery if else if statements arent working

StackOverflow https://stackoverflow.com/questions/21906319

Question

I'm trying to run an if else statement using jQuery. I believe I've followed the correct structure but the code isn't running.

I believe it has something to do with the nature of the statements, where the one overrides the other regardless of the if else statement I written.

The last else if statement works but the middle one doesn't?

Here is a fiddle http://jsfiddle.net/gdcx7/

See code below

 <body>
<div class="thumb-holder">
    <div class="post-title" data-date="Tuesday,14 December 2013" data-time="18:00">
        <img class="featured-thumb" src="http://web-vassets.ea.com/Assets/Richmedia/Image/FeaturedGame/crysis3_298x168.jpg?cb=1334583481" alt="tag test" style="width:250px;height:156px" />
    </div>
</div>
<div class="thumb-holder">
    <div class="post-title" data-date="Tuesday,14 December 2012" data-time="18:00">
        <img class="featured-thumb" src="http://web-vassets.ea.com/Assets/Richmedia/Image/FeaturedGame/crysis3_298x168.jpg?cb=1334583481" alt="tag test" style="width:250px;height:156px" />
    </div>
</div>

<div calss="thumb-holder">
    <div class="post-title" data-date="Tuesday,14 December 2012" data-time="18:00">
        <img class="featured-thumb" src="http://web-vassets.ea.com/Assets/Richmedia/Image/FeaturedGame/crysis3_298x168.jpg?cb=1334583481" alt="tag test" style="width:250px;height:156px" />
    </div>
</div>

<div class="thumb-holder">
    <div class="post-title" data-date="Thursday,27 February 2014" data-time="18:00">
        <img class="featured-thumb" src="http://web-vassets.ea.com/Assets/Richmedia/Image/FeaturedGame/crysis3_298x168.jpg?cb=1334583481" alt="tag test" style="width:250px;height:156px" />
    </div>
</div>


<div class="thumb-holder">
    <div class="post-title" data-date="Thursday,25 December 2014" data-time="18:00">
        <img class="featured-thumb" src="http://web-vassets.ea.com/Assets/Richmedia/Image/FeaturedGame/crysis3_298x168.jpg?cb=1334583481" alt="tag test" style="width:250px;height:156px" />
    </div>
</div>


   $('.post-title').each(function () {
     //1 day old
     if (new Date($(this).data('date')).getTime() < new Date().getTime()) {
      $(this).css({
        opacity: 0.5,
        border: '2px solid blue'
      });
    } 

     //older than 7 days
    else if (new Date($(this).data('date')).getTime() < new Date().getTime() - (24 * 7) * 60 * 60 * 1000) {
    $(this).css({
        opacity: 0.5,
        border: '2px solid red'
     });
    }

    //7 days to go
    else if (new Date($(this).data('date')).getTime() < new Date().getTime() + (24 * 7) * 60 * 60 * 1000) {
     $(this).css({
        opacity: 0.5,
        border: '2px solid green'
     });
    }
 });

No correct solution

OTHER TIPS

It's because you do the least constraint first:

if it's in the past then if less than 7 days then if less than 7 days

Firs toff, note the last two condition are identical. As far as I understand, the last one is there for the future ? If so, change your test sign and turn it to >

All this said, you should reverse ifses and end up with:

if in the future then // else if in the last past 7 days then // then // older than 7 days) end

Additional notes : — please, store the date in a local variable to make code lisible and less power hungry; — take now time first (for same reasons) plus, ech time you invoke getTime, the result changes by the time calls span in time (it's milliseconds, but…)

Use below condition in your if clause-

    if (new Date($(this).data('date')).getTime() < new Date().getTime() && new Date($(this).data('date')).getTime() > new Date().getTime() - (24 * 1) * 60 * 60 * 1000)
    {
       -----
    }

Rest is fine. This will check if the test time belongs to last 24hrs i.e. 1 day old. Otherwise your if condition is checking if the timestamp is less than now means any time before now.

Also last if condition could be-

   else if (new Date($(this).data('date')).getTime() < new Date().getTime() + (24 * 7) * 60 * 60 * 1000 && new Date($(this).data('date')).getTime() > new Date().getTime()) 
   {
      ------
   }

i.e. If Test time is less than future 7 days & greater than current time.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top