Question

当窗口调整为某些像素时，我试图隐藏文档的每个元素。

这是我试图编写的脚本 -

当窗口调整为某些像素时，每个文档都会隐藏，显示在其他位置。

我尝试实现这个脚本 -

    <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>

这个脚本不能正常工作，我怎样才能改进这个脚本来隐藏窗口大小调整的每个元素？请提出建议！

Answer 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();
            }
        });
    });
});

Answer 2

我不确定这是最好的解决方案，还是一个很好的解决方案，所以有人会根据需要纠正我......但我想这样会对你的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

如何隐藏窗口大小的每个文档？

2 个答案: