2013-07-02 47 views
0

我試圖隱藏文檔的每個元素,當窗口被調整到一些像素。如何在窗口中隱藏每個文檔調整大小?

這就是我試圖腳本 -

當窗口調一些像素,然後每一個文檔去隱藏其他所示。

我試圖實現這個腳本 -

<script type="text/javascript"> 
     $(function() { 
      var eachdoc=$(document).each(); 
      var docsize = eachdoc.width(); 
      $(window).resize(function() { 
       $(document).each(function() { 
        if (docsize > $(window).width()-400) { 
         $(this).hide(); 
        } 
        else { 
         $(this).show(); 
        } 
       }); 
      }); 
     }); 
    </script> 

那麼這個腳本不能正常工作,我怎麼能改善這個腳本來隱藏窗口的每個元素調整? 請建議!

+0

有沒有在頁面的多個文檔?你想隱藏一些元素/文件 –

+0

在窗口中使用每個元素resize = hard對於CPU –

+0

@ArunPJohny,是一些表格和信息塊。 – Manoj

回答

1

的基本原理就應該像這樣

$(function() { 
    var els=$('.mytable, .mypara');//list of elements 
    var docsize = eachdoc.width(); 
    $(window).resize(function() { 
     var cuttoff = $(window).width() - 400; 
     els.each(function (idx, el) { 
      var $this = $(this); 
      if ($this.width() > cuttoff) { 
       $this.hide(); 
      } else { 
       $this.show(); 
      } 
     }); 
    }); 
}); 
0

我不能肯定,這是最好的解決方案,甚至一個很好的解決方案,從而爲需要有人糾正我。但我想這種方式在你的CPU上會更容易一些。

$.fn.filterNumberRange = function(item, low, high){ 
    return this.filter(function(){ 
     var value = +$(this).attr(item); 
     return value >= low && value <= high; 
    }); 
}; 

var documents = $('document-selector'); 

$(documents).each(function(){ 
    $(this).attr('data-width', $(this).width()); 
}); 

$(window).resize(function(){ 
    var current-width = parseInt($(window).width()) - 400; 

    $(documents).filterNumberRange('data-width', 0, current-width).show; 
    $(documents).filterNumberRange('data-width', current-width + 1, 9999).hide; 
}); 

一把抓起這裏的過濾功能: http://forum.jquery.com/topic/new-attribute-selectors-for-less-than-and-greater-than

相關問題