Question

我正在尝试做一些非常简单的事情：在点击按钮后将网站的背景更改为不同的图像。

我一直试图让它工作几个小时，背景不会改变。我查看了我的图片目录。一切都是正确的，我的代码出了问题，我看不出它是什么：

$("#boots").on("click", function() {
    $(".intro").css("background-image", "url(image/1.jpg)");
    });
});

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-size: 16px;
}

.intro {
    width: 100%;
    height: 100%;
    margin: auto;
    background-image: url(image/0.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

<head>
    <link rel="stylesheet" type="text/css" href="a.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "b.js"></script>
</head>
<body>
<section class ="intro">
    <div class="inner">
        <div class="content">
            <input class="aButton" type="button" id="boots" />
        </div>
    </div>
</section>
</body>

Answer 1

您的JavaScript中似乎有语法错误

$("#boots").on("click", function() {
    $(".intro").css("background-image", "url(image/1.jpg)");
    }); // <-- shouldn't be there
});

如何使用jquery更改按钮单击时的背景图像？

1 个答案: