2013-07-02 34 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

相关问题