javascript - 用于响应式网页设计的 jQuery

Question

大家好，我是 jQuery 新手。 现在我一直在阅读一些博客，描述 javascript 如何响应式地完成神奇的事情。那里有很多插件，但我想对于我的工作来说我不需要它们。 我试图根据屏幕分辨率加载动态图像，但不知何故我无法设置屏幕尺寸。 这是我的代码:

$(window).resize(function() {
    if($(window).width() >= 1000 && $(window).width()<=1400 ){    
        $('#myFirstImage').attr('src', 'img/bgLow.jpg');
    }
});

现在，随着浏览器大小的调整，JavaScript 将查找尺寸。 不知何故，我无法在 1000 和 1500 像素范围内设置某些内容。你们能告诉我这个 if 逻辑哪里错了吗？ 谢谢。

Answer 1

尝试将通用代码放在函数中，然后绑定(bind)事件，并调用函数:

$(document).ready(function() {

    // Optimisation: store the references outside the event handler:
    var $window = $(window);

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize >= 1000 && windowsize <= 1400) {
            $('#myFirstImage').attr('src', 'img/bgLow.jpg');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);
});