Question

我有一个javascript函数，可以在网站上显示新闻。目前，12个项目显示在旋转木马上，每个旋转木马滑梯上显示6个项目。

当屏幕尺寸达到768px时，我想更改此设置，因此每张幻灯片上只有3个项目。是否可以使用javascript进行这样的媒体查询？

在下面的代码中，'items'是总文章，'breakpoint'是一张幻灯片上的金额。然后我放了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隐藏第4个以后的每个元素。

/* 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 Example，我们可以看看您是否可以单独使用CSS解决此问题，而无需使用您的JavaScript代码 uglier

使用javascript创建媒体查询

1 个答案: