时间戳

首页 > 解决方案 > 如何修复适用于 console.log() 但代码不正确的 jQuery 媒体查询

jquery - 如何修复适用于 console.log() 但代码不正确的 jQuery 媒体查询

问题描述

我正在尝试根据屏幕宽度更改元素的背景图像，而我不能使用 CSS 的原因是因为图像路径是使用 PHP 拉入模板的。

我尝试了几种不同的 jQuery 媒体查询方法，我现在使用的方法确实有效，因为我在 console.log() 中添加了不同的消息并且这些消息正确显示。

当我用console.log()更改图像的代码替换 时，它不起作用。

var image;
jQuery(window).resize(function() {
  if (jQuery(window).width() <= 800) {
    var image = '<?php the_field("mobile_header_background"); ?>';
    var css = 'url(' + image + ') no-repeat center;';
    jQuery('.homehead').css("background", css);
  } else {
    var image = '<?php the_field("header_background"); ?>';
    var css = 'url(' + image + ') no-repeat center;';
    jQuery('.homehead').css("background", css);
  }
});

<div class="homehead" style="background: url() no-repeat center; background-size: cover;">

我希望 homehead div 的背景值会相应更新，但它只是不起作用。

编辑：

我刚刚尝试简化代码，消除对变量的需求并将图像路径直接输出到 .css 函数，但这也不起作用，尽管正确输出了图像路径。

jQuery(window).resize(function() {
  if (jQuery(window).width() <= 800) {
    jQuery(".homehead").css("background-image","url(<?php the_field('mobile_header_background'); ?>)");
  } else {
    jQuery(".homehead").css("background-image","url(<?php the_field('header_background'); ?>)");
  }
});

<div class="homehead" style="background-image: url(); background-repeat: no-repeat; background-position: center; background-size: cover;">

标签： jquerymedia-queries

解决方案

问题是 jQuery 忽略了 css 设置，因为它们不喜欢语法。如果您从 css 字符串的末尾删除分号，例如

var css = 'url(' + image + ') no-repeat center';

代替

var css = 'url(' + image + ') no-repeat center;';

它应该工作。

请记住，此代码只会在调整大小时运行。您可能还想在页面加载时运行它。我建议将代码移动到一个命名函数中并在加载时调用它，并将其传递给resize处理程序。

推荐阅读