Javascript 将我的页面更新为jQuery

我需要将这个更新到jQuery，我想我得到了一切，但它不起作用，我唯一能想到的是doc.body.style.back部分不正确，但我不知道jQuery的正确格式。有人能帮忙吗

$(document).ready(function() {
    let clicker = $('#jeffery');
    clicker.on('click', clickHandler);

function clickHandler(e) {
    document.body.style.background = 'url("jefferyBig.jpg")';
    }
}

$(document).ready(function() {
    let clicker1 = $('#eagles');
    clicker1.on('click', clickHandler1);

function clickHandler1(e) {
    document.body.style.background = 'url("eaglesBig.jpg")';
    }
}

$(document).ready(function() {
    let clicker2 = $('#wentz');
    clicker2.on('click', clickHandler2);

function clickHandler2(e) {
    document.body.style.background = 'url("wentzBig.jpg")';
    }
}

$(document).ready(function() {
    let clicker3 = $('#jenkins');
    clicker3.on('click', clickHandler3);

function clickHandler3(e) {
    document.body.style.background = 'url("jenkinsBig.jpg")';
    }
}

$(document).ready(function() {
    let clicker4 = $('#cox');
    clicker4.on('click', clickHandler4);

function clickHandler4(e) {
    document.body.style.background = 'url("coxBig.jpg")';
    }
}

您可以使用方法：

$(body).css("background", "url('eaglesBig.jpg')");

而且，正如其他人所指出的，您不需要多个

document.ready（）

函数-您可以将DOM准备就绪后要运行的所有代码组合成一个.ready（）函数。另外，您当前的代码没有所有必要的

}

语法，所以也要检查一下

$（文档）.ready（函数（）{
$（'body'）.css（'background-image'，'url(https://www.w3schools.com/html/pulpitrock.jpg)');
});
您可以使用
css（）
方法更新背景图像。您还可以通过将图像src放置在要单击的元素上的
data-*
属性中，使代码变干。然后，您可以使用一个类对所有必需的元素进行分组，并使用单个事件处理程序：

$（文档）.ready（函数（）{
$（'.bg触发器'）。单击（函数（）{
$（'body'）.css（'background-image'，'url（${$（this.data（'src'）}'）`）；
});
});

杰弗里
老鹰
温茨
詹金斯
考克斯

---

这种方法的优点是简化了JS代码，并且在不接触JS代码的情况下可以无限扩展。要添加选项，只需使用相应的

类

和

数据

属性创建新的HTML元素。

因此，如果要在Background中添加图像，则不应具有多个.ready（）函数。只需将所有内容放在一个您只需调用一次

（document）.ready（）

，并将所有代码包装在其中即可。另外，您不需要将选择器分配给变量，只需调用

$（'#jenkins'）。单击（function（））

。当然，您这样做很好，但是您应该努力编写更简洁的代码。这个代码示例已经成熟refactoring@ScottMarcus但这本身就有问题，多个ready（）函数使代码更难阅读，因此更难维护。虽然技术上是正确的，但我认为这根本不是最佳实践