Question

我正在尝试使用jQuery替换身体背景中的图像，但是无论我做什么，它都不起作用。代码与其他问题或教程中的代码几乎相同。这是有效的CSS：

body{
     background-image: url('img/1.jpg');
}

但是这里没有的jQuery：

$('body').css('background-image', 'url(img/2.jpg)');

和HTML：

 <html lang="pl">
 <head>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
 </script>
 <script src="script.js"></script>
 <meta charset="UTF-8">

 <link rel="stylesheet" href="styles.css">
 <Title> Moja firma </Title>
 </head>
 <body>

 </body>
 </html>

我检查了一下，并加载了jQuery以及带有其代码的文件。我也尝试在网址中加上引号，但也没有。

Answer 1

当我测试jquery时，您的代码似乎运行良好。因此，我建议将<script src="script.js"></script>移到您的身体标签的底部。

<body>
    stuff for page

    <script src="script.js"></script>
</body>

否则，您应该检查页面是否准备就绪

$(document).ready(function() {
    $('body').css('background-image', 'url(img/2.jpg)');
});

Answer 2

工作示例只是将代码包装在document.ready函数中

$(function(){
  $("body").css('background-image','url(https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png)');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="pl">
 <head>
 
 <meta charset="UTF-8">

 <link rel="stylesheet" href="styles.css">
 <Title> Moja firma </Title>
 </head>
 <body>

 </body>
 </html>

Answer 3

您可以尝试以下方法。

我将在每个页面上这样做。

<body class="home">
<body class="about">
<body class="contact">

在CSS下方添加

.home header { background-image: url(../assets/img/consulting.png"; }
.about header { background-image: url(../assets/img/consulting2.png"; }
.contact header { background-image: url(../assets/img/consulting3.png"; }

在按钮上单击，您可以在js下面添加。

$(function(){
    $('#aboutlink').click(function(e){
        $('body').removeClass().addClass('about');

        //your other snippets here

        e.preventDefault();
    });
});

Answer 4

您触发更改的事件是什么？如果您不触发事件，则更改将不会显示。示例：

加载文档时：

$(document).ready(function(){
$('body').css('background-image', "url('img/2.jpg')");
})

当您按下按钮时

$('button').on("click", function(){
 $('body').css("background-image", "url('img/2.jpg')");
})

这是一个可行的例子

https://codepen.io/mercabrand/pen/KeLLrZ

还要检查符合您需求的事件

https://developer.mozilla.org/en-US/docs/Web/Events

无法使用jQuery

4 个答案: