2016-08-19 72 views
0

我有一個在網站上顯示新聞的javascript函數。目前在轉盤上顯示12個項目,在每個轉盤幻燈片上顯示6個項目。用javascript創建媒體查詢

當屏幕尺寸達到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); 

     } 
+0

您是否嘗試過使用CSS @media screen和(min-width:...)? –

回答

2

爲什麼要用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代碼醜陋

+0

謝謝你,工作! – user3005003