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>

那么这个脚本不起作用，我该如何改进这个脚本来隐藏窗口调整大小时的每个元素？请建议！

4

2 回答 2

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();
            }
        });
    });
});
于 2013-07-02T03:58:26.113 回答
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

于 2013-07-02T04:10:53.403 回答