JQuery的.addClass到當月優惠券在兩個分開的幾年

Question

我正在與圖像的優惠券頁面年度&每個月我想強調什麼優惠券是最新的。優惠券範圍從五月到次年四月。該頁面將從今年5月開始生效。

HTML

<div id="blue-colum" class="monthly-coupon-column"> 
    <ul> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-may-2014.png" width="312" height="240" alt="May 2014 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-august-2014.png" width="312" height="240" alt="August 2014 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-november-2014.png" width="312" height="240" alt="November 2014 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-february-2015.png" width="312" height="240" alt="February 2015 Coupon" /></li> 
    </ul> 
</div> 
<div id="pink-colum" class="monthly-coupon-column"> 
    <ul> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-june-2014.png" width="312" height="240" alt="June 2014 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-september-2014.png" width="312" height="240" alt="September 2014 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-december-2014.png" width="312" height="240" alt="December 2014 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-march-2015.png" width="312" height="240" alt="March 2015 Coupon" /></li>  
    </ul> 
</div> 
<div id="green-colum" class="monthly-coupon-column"> 
    <ul> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-july-2014.png" width="312" height="240" alt="July 2014 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-october-2014.png" width="312" height="240" alt="October 2014 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-january-2015.png" width="312" height="240" alt="January 2015 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-april-2015.png" width="312" height="240" alt="April 2015 Coupon" /></li>  
    </ul> 
</div> 

顯然，我的JQuery的技能需要改進。這似乎是.addClass，但它選擇了2015年版本。我知道我們還沒有達到5月的日期。

SCRIPT

<script type="text/javascript"> 
    $(function() { 
     var currentMonth = (new Date).getMonth(); 
     if (currentMonth) { 
      $(".month-offer").addClass("this-month"); 
     } 
    }); 
</script 

CSS

.month-offer.this-month 
{ 
    transform:scale(1.05); 
} 

Answer 1

你沒有當月和當年在上面的HTML。現在我剛剛將2015年4月份更改爲2014年，查看它在月份和年份中的小提琴。

var dt = new Date(); 
var m = ['January', 'February', 'March', 
       'April', 'May', 'June', 'July', 
       'August', 'September', 'October', 'November', 'December']; 

var month = m[dt.getMonth()]; //you get the idea... 
var y = dt.getFullYear(); 


$(".monthly-coupon-column ul li img").each(function(i,v) { 
     var result = $(this).attr("alt").split(" "); 

    if(result[0] == month && result[1] == y){ 
     $(this).addClass("red"); 
    } 

}); 

Fiddle

Answer 2

一個這樣從舊標籤得到一個月的可能的方式是這樣的：

function getMonthFromString(mon){ 
    return new Date(Date.parse(mon +" 1, 2014")).getMonth() 
} 

var now = new Date(); 
$(".month-offer").each(function() { 
    // assume the first word of the alt tag is the month name 
    var altWords = this.alt.split(" "); 
    var yearNum = parseInt(altWords[1], 10); 
    var monthNum = getMonthFromString(altWords[0]); 
    if (now.getMonth() == monthNum && now.getFullYear() == yearNum) { 
     $(this).addClass("this-month"); 
    } 

}); 

工作演示：http://jsfiddle.net/jfriend00/g2kg6/

爲了解釋，這一代碼進入到每個.month-offer對象，獲取月份和年份從ALT標籤，然後比較了當前的年份和月份，如果他們匹配，它增加了this-month類到該對象。

注：參見this question爲getMonthFromString()函數的源代碼。

Answer 3

嘗試這樣的事情

 $(function() { 
     var monthNames = [ "January", "February", "March", "April", "May", "June", 
     "July", "August", "September", "October", "November", "December" ]; 

     var currentMonth = (new Date).getMonth(); 
     var currentYear = (new Date).getFullYear(); 

     $('.month-offer').each(function(){ 
      var alt = this.alt; 
      var alt_arr = alt.split(' '); 
      var m = alt_arr[0]; 
      var y = alt_arr[1]; 
      if(monthNames[currentMonth] == m && currentYear ==y){ 
       $(this).addClass("this-month"); 
      } 
     }) 
    }); 

Answer 4

嘗試

HTML

<div id="blue-colum" class="monthly-coupon-column"> 
    <ul> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-may-2014.png" width="312" height="240" alt="2014-05 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-august-2014.png" width="312" height="240" alt="2014-08 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-november-2014.png" width="312" height="240" alt="2014-11 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-february-2015.png" width="312" height="240" alt="2015-02 Coupon" /></li> 
    </ul> 
</div> 
<div id="pink-colum" class="monthly-coupon-column"> 
    <ul> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-june-2014.png" width="312" height="240" alt="2014-06 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-september-2014.png" width="312" height="240" alt="2014-09 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-december-2014.png" width="312" height="240" alt="2014-12 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-march-2015.png" width="312" height="240" alt="2015-03 Coupon" /></li>  
    </ul> 
</div> 
<div id="green-colum" class="monthly-coupon-column"> 
    <ul> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-july-2014.png" width="312" height="240" alt="2014-07 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-october-2014.png" width="312" height="240" alt="2014-10 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-january-2015.png" width="312" height="240" alt="2015-01 Coupon" /></li> 
     <li><img class="month-offer" src="images/monthly-online-offers/coupon-april-2015.png" width="312" height="240" alt="2015-04 Coupon" /></li>  
    </ul> 
</div> 

JS

$(function() { 
    (function(month) { 
     $("[alt^="+month+"]").addClass("this-month"); 
    })(new Date().toJSON().substr(0,7)); 
}); 

的jsfiddle http://jsfiddle.net/guest271314/TaLHG/