jQuery 语法错误 - 尝试检测视口大小并选择背景图像以使用 CSS

发布于 2024-09-03 06:22:11 字数 783 浏览 1 评论 0原文

请温柔一点，我还在学习。我想我的问题的解决方案很简单，也许我只是在电脑前呆得太久了。

我试图检测视口的大小，然后根据视口的大小使用不同大小的图像作为元素的背景。

这是我到目前为止所得到的：

$(document).ready(function(){

    var pageWidth = $(window).width();

    if ( pageWidth <= 1280 ) {
        $('#contact').css('background-image', 'url(../images/contact_us_low.jpg)');
    }
    elseif ( pageWidth > 1280 ) {
        $('#contact').css('background-image', 'url(../images/contact_us_high.jpg)');
    }
 });

错误：

丢失；声明之前 [中断此错误] elseif ( pageWidth > 1280 ) {\n (第 7 行)

对我来说，似乎所有分号都在正确的位置。两个问题：

我是否会以合理的方式解决问题？对我来说，一个简单的条件应该可以解决这个背景问题，因为代码只是根据检测到的视口大小在两个图像之间进行选择。
您能帮我指出我的 n00b 语法错误吗？有时，有一双额外的眼睛来观察这样的东西确实有帮助，即使很小。

非常感谢您的建议，我将继续浏览和阅读我可用的文档。

原文

Please be gentle, I'm still learning. I imagine that the solution to my problem is simple and that perhaps I have just been in front of the computer too long.

I am trying to detect the size of the viewport, and then use a different sized image for a background on an element depending on the size of the viewport.

Here is what I have so far:

$(document).ready(function(){

    var pageWidth = $(window).width();

    if ( pageWidth <= 1280 ) {
        $('#contact').css('background-image', 'url(../images/contact_us_low.jpg)');
    }
    elseif ( pageWidth > 1280 ) {
        $('#contact').css('background-image', 'url(../images/contact_us_high.jpg)');
    }
 });

Error:

missing ; before statement
[Break on this error] elseif ( pageWidth > 1280 ) {\n (Line 7)

To me it seems like all of my semi-colons are in the right place. Two questions:

Am I going about solving the problem in a sensible way? To me a simple conditional should solve this background problem, as the code is merely selecting between two images based on what size it detects the viewport to be.
Can you please help point out my n00b syntax error? Sometimes it really does help to have an extra pair of eyes look at something like this, even if small.

Thank you kindly for your advice, I will continue poking and perusing the docs I have available to me.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你是我的挚爱i 2024-09-10 06:22:11

该错误出现在您的 Javascript else If 语法中。 else 和 If 之间需要有一个空格。

回复收藏 0 原文

雨轻弹 2024-09-10 06:22:11

你可以做一个别的。

$(document).ready(function(){

    var pageWidth = $(window).width();

    if ( pageWidth <= 1280 ) {
        $('#contact').css('background-image', 'url(../images/contact_us_low.jpg)');
    } else {
        $('#contact').css('background-image', 'url(../images/contact_us_high.jpg)');
    }
});

You can just do an else.

$(document).ready(function(){

    var pageWidth = $(window).width();

    if ( pageWidth <= 1280 ) {
        $('#contact').css('background-image', 'url(../images/contact_us_low.jpg)');
    } else {
        $('#contact').css('background-image', 'url(../images/contact_us_high.jpg)');
    }
});

回复收藏 0 原文

~没有更多了~