前端學習隨身記

1.巧用trigger(jQuery)

$(function () {
    /*監聽屏幕大小*/
    $(window).on('resize', function () {
        /*獲取屏幕寬度*/
        var items = $('.carousel-inner').find('.item');
        var width = $(window).width();
        if (width >= 768) {
            /*爲每格item動態添加*/
            items.each(function (index,value) {
                var item = $(this);
                var imgSrc = item.data('largeImage');//自定義屬性:data-large-image   獲取屬性值:data('largeImage')
                console.log(imgSrc);
                item.html($('<a href="javascript:;" class="pcImg"></a>').css('backgroundImage',"url('"+imgSrc+"')"));
            });
        }
        else {
            items.each(function (index,value) {
                var item = $(this);
                var imgSrc = item.data('smallImage');
                item.html('<a href="javascript:;" class="mobileImg"><img src="'+imgSrc+'" alt="..."></a>')
            })
        }
    }).trigger('resize');//trigger() 方法觸發被選元素的指定事件類型
});