使用JavaScript創建媒體查詢

Question

我有一個JavaScript功能，可在網站上顯示新聞。 目前，輪播上顯示12個項目，每個輪播幻燈片上顯示6個項目。

當屏幕尺寸達到768px時，我想更改此設置，以便每張幻燈片上只有3個項目。 是否可以使用javascript進行媒體查詢？

在下面的代碼中，“項目”是文章總數，而“斷點”是一張幻燈片上的數量。 然后，我使用additems函數來顯示文章在頁面上的顯示方式。

 $.fn.InitLatestNews = function(opts) {
        var config = $.extend({}, {
            'data' : [],
            'items' : 12,
            'breakpoint' : 6
        }, opts);

        var navIndex = 1;

        function AddItems(obj) {
            var htmlstring = '';
            var json = config.data;

            var itemNumber;
            if( config.items < json.length ) 
                itemNumber = config.items;
            else
                itemNumber = json.length;

            htmlstring += '<ul class="latestNews_list">';

            for( var i = 0; i < itemNumber; i++ ) {

                if ( i > 0 ) {
                    if( (i + 1) % config.breakpoint === 1 ) {
                        navIndex++;
                    }
                }

                if( navIndex === 1 )
                    htmlstring += '<li data-html="page-' + navIndex + '">';
                else
                    htmlstring += '<li class="hidden" data-html="page-' + navIndex + '">';

                htmlstring += '<div class="ln_image">';
                htmlstring += '<a href="' + json[i].url + '"></a>';
                if( json[i].imageUrl ) {
                    htmlstring += '<img class="ln_main_img" src="' + json[i].imageUrl + '" alt="' + json[i].title + '">';
                    htmlstring += '<div class="ln_read_overlay">';
                    htmlstring += '<div class="ln_overlay_inner">';
                    htmlstring += '<img src="/stylesheet/medway2014/magnifierglass.png">';
                    htmlstring += '<p>Read Article</p>';
                    htmlstring += '</div>';
                    htmlstring += '</div>';
                }
                htmlstring += '</div>';

                htmlstring += '<div class="ln_info">';
                htmlstring += '<a href="' + json[i].url + '"><h2>' + json[i].title + '</h2></a>';
                htmlstring += '<p>' + json[i].leader + '</p>';
                htmlstring += '</div>';

                htmlstring += '</li>';

            }

            htmlstring += '</ul>';

            obj.html(htmlstring);

        }

Answer 1

為什么要用JavaScript做到這一點？

存在關注點分離的原因。 JavaScript應該添加動態行為，但是表示形式和樣式屬於CSS。

您可以輕松地離開你的代碼是如果它目前正在和使用CSS來隱藏從第四年起每一個元素。

/* hide all news from the 4th onwards */
.latestNews_list li:nth-child(n+4)  {
  display: none;
}
@media screen and (min-width: 768px){
  .latestNews_list li:nth-child(n+4){
     display: list-item; /* or what ever was their display value before */
  }
}

我們無法從您的代碼中看出很多，但可以隨時提供一個MCV示例 ，我們可以看看您是否可以單獨使用CSS來解決這個問題而又不使JavaScript代碼更丑陋 。