Question

我是新来的，经过一系列关于这个问题的搜索，我来到了这里。我有一个带有next / prev按钮的jquery滑块...一切正常，我想根据当前的浏览器宽度显示一些图像，例如，如果浏览器宽度小于400只显示1个图像，依此类推。这适用于加载但是当我调整浏览器大小时它不会按预期工作。（我也是Jquery的新手......显然）。我非常感谢你的帮助。

这是HTML

<div class="trends">
    <div class="top-trends">
        <img src="/some-img.png">
    </div>

    <div class="top-trends">
        <img src="/some-img.png">
    </div>

    <div class="top-trends">
        <img src="/some-img.png">
    </div>

    <div class="top-trends">
        <img src="/some-img.png">
    </div>

    <div class="top-trends">
        <img src="/some-img.png">
    </div>

    <div class="top-trends">
        <img src="/some-img.png">
    </div>
</div>

和jQuery

(function($){
    $(document).ready(function(){
        var windowsWidth = $(window).width();

        if ( windowsWidth < 400 ) {
            $('.trends').children('.top-trends:gt(0)').hide();

            var slideFoward = function() {
                var next = $('.top-trends:visible').next();
                var first = $('.top-trends:visible').first();

                if ( $('.top-trends:visible').length == 1 && $('.top-trends:visible ~ .top-trends:hidden').length == 0 ) {
                    $('.trends-next').addAttr('disabled', 'disabled');
                }
                next.show();
                first.hide();
            }
            var slideBackwards = function() {
                var prev = $('.top-trends:visible').prev();
                var last = $('.top-trends:visible').last();
                var hf = $('.top-trends:visible').last().prevAll().length;

                if ( hf == 1  ) {
                    $('.trends-back').addAttr('disabled', 'disabled');
                }
                prev.show();
                last.hide();
            }
        }

        else if ( windowsWidth < 600 ) {
            $('.trends').children('.top-trends:gt(1)').hide();

            var slideFoward = function() {
                var next = $('.top-trends:visible').next();
                var first = $('.top-trends:visible').first();

                if ( $('.top-trends:visible').length == 2 && $('.top-trends:visible ~ .top-trends:hidden').length == 0 ) {
                    $('.trends-next').addAttr('disabled', 'disabled');
                }
                next.show();
                first.hide();
            }
            var slideBackwards = function() {
                var prev = $('.top-trends:visible').prev();
                var last = $('.top-trends:visible').last();
                var hf = $('.top-trends:visible').last().prevAll().length;

                if ( hf == 2  ) {
                    $('.trends-back').addAttr('disabled', 'disabled');
                }
                prev.show();
                last.hide();
            }
        }

        else if ( windowsWidth < 800 ) {
            $('.trends').children('.top-trends:gt(2)').hide();

            var slideFoward = function() {
                var next = $('.top-trends:visible').next();
                var first = $('.top-trends:visible').first();

                if ( $('.top-trends:visible').length == 3 && $('.top-trends:visible ~ .top-trends:hidden').length == 0 ) {
                    $('.trends-next').addAttr('disabled', 'disabled');
                }
                next.show();
                first.hide();
            }
            var slideBackwards = function() {
                var prev = $('.top-trends:visible').prev();
                var last = $('.top-trends:visible').last();
                var hf = $('.top-trends:visible').last().prevAll().length;

            if ( hf == 3  ) {
                $('.trends-back').addAttr('disabled', 'disabled');
            }
            prev.show();
            last.hide();
        }
    }

    else {
        $('.trends').children('.top-trends:gt(3)').hide();

        var slideFoward = function() {
            var next = $('.top-trends:visible').next();
            var first = $('.top-trends:visible').first();

            if ( $('.top-trends:visible').length == 4 && $('.top-trends:visible ~ .top-trends:hidden').length == 0 ) {
                $('.trends-next').addAttr('disabled', 'disabled');
            }
            next.show();
            first.hide();
        }
        var slideBackwards = function() {
            var prev = $('.top-trends:visible').prev();
            var last = $('.top-trends:visible').last();
            var hf = $('.top-trends:visible').last().prevAll().length;

            if ( hf == 4  ) {
                $('.trends-back').addAttr('disabled', 'disabled');
            }
            prev.show();
            last.hide();
        }
    }
    $('.trends-next').click(slideFoward);
    $('.trends-back').click(slideBackwards);
});


$(window).resize(function(){
    var windowsWidth = $(window).width();

    if ( windowsWidth < 400 ) {
        $('.trends').children('.top-trends:gt(0)').hide();

        var slideFoward = function() {
            var next = $('.top-trends:visible').next();
            var first = $('.top-trends:visible').first();

            if ( $('.top-trends:visible').length == 1 && $('.top-trends:visible ~ .top-trends:hidden').length == 0 ) {
                $('.trends-next').addAttr('disabled', 'disabled');
            }
            next.show();
            first.hide();
        }
        var slideBackwards = function() {
            var prev = $('.top-trends:visible').prev();
            var last = $('.top-trends:visible').last();
            var hf = $('.top-trends:visible').last().prevAll().length;

            if ( hf == 1  ) {
                $('.trends-back').addAttr('disabled', 'disabled');
            }
            prev.show();
            last.hide();
        }
    }

    else if ( windowsWidth < 600 ) {
        $('.trends').children('.top-trends:gt(1)').hide();

        var slideFoward = function() {
            var next = $('.top-trends:visible').next();
            var first = $('.top-trends:visible').first();

            if ( $('.top-trends:visible').length == 2 && $('.top-trends:visible ~ .top-trends:hidden').length == 0 ) {
                $('.trends-next').addAttr('disabled', 'disabled');
            }
            next.show();
            first.hide();
        }
        var slideBackwards = function() {
            var prev = $('.top-trends:visible').prev();
            var last = $('.top-trends:visible').last();
            var hf = $('.top-trends:visible').last().prevAll().length;

            if ( hf == 2  ) {
                $('.trends-back').addAttr('disabled', 'disabled');
            }
            prev.show();
            last.hide();
        }
    }

    else if ( windowsWidth < 800 ) {
        $('.trends').children('.top-trends:gt(2)').hide();

        var slideFoward = function() {
            var next = $('.top-trends:visible').next();
            var first = $('.top-trends:visible').first();

            if ( $('.top-trends:visible').length == 3 && $('.top-trends:visible ~ .top-trends:hidden').length == 0 ) {
                $('.trends-next').addAttr('disabled', 'disabled');
            }
            next.show();
            first.hide();
        }
        var slideBackwards = function() {
            var prev = $('.top-trends:visible').prev();
            var last = $('.top-trends:visible').last();
            var hf = $('.top-trends:visible').last().prevAll().length;

            if ( hf == 3  ) {
                $('.trends-back').addAttr('disabled', 'disabled');
            }
            prev.show();
            last.hide();
        }
    }

    else {
        $('.trends').children('.top-trends:gt(3)').hide();

        var slideFoward = function() {
            var next = $('.top-trends:visible').next();
            var first = $('.top-trends:visible').first();

            if ( $('.top-trends:visible').length == 4 && $('.top-trends:visible ~ .top-trends:hidden').length == 0 ) {
                $('.trends-next').addAttr('disabled', 'disabled');
            }
            next.show();
            first.hide();
        }
        var slideBackwards = function() {
            var prev = $('.top-trends:visible').prev();
            var last = $('.top-trends:visible').last();
            var hf = $('.top-trends:visible').last().prevAll().length;

            if ( hf == 4  ) {
                $('.trends-back').addAttr('disabled', 'disabled');
            }
            prev.show();
            last.hide();
        }
    }
    $('.trends-next').click(slideFoward);
    $('.trends-back').click(slideBackwards);
});
})(jQuery);

Answer 1

好的，所以我想我知道你的意思。在减小窗口大小时隐藏元素，但在增加时不显示，对吧？

如果我遇到问题，这是一个简单的解决方法。您只想在每个窗口调整大小时显示所有图像，然后决定隐藏哪些元素：

$(window).resize(function () { $('.trends').children('.top-trends').show(); if (windowsWidth < 400) { ...

查看整个事件here（为了清楚起见，我删除了所有的slideFoward / slideFoward函数 - 您可能希望下次删除所有不必要的代码，它会使问题更简单）。

JQuery $（window）.resize（）函数无法正常工作

1 个答案: