Question

我正在为一年中的每个月制作带有图像优惠券的页面。我想强调一下目前的优惠券。优惠券的价格从次年的5月到4月。该页面将于今年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

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

Answer 2

从alt标签获取月份的一种可能方法是：

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

您在上面的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 4

尝试这样的事情

     $(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");
            }
        })
    });

JQuery .addClass在两个单独的年份内到当月的优惠券

4 个答案: