Question

我需要将此更新为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")';
    }
}

Answer 1

您使用 .css() 方法：

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

而且，正如其他人所指出的那样，您不需要多个document.ready()函数 - 您可以在DOM准备就绪后将所有要运行的代码组合成一个.ready（）函数。此外，您当前的代码没有所有必需的}语法，因此请检查它。

Answer 2

这是一个工作示例

 $(document).ready(function() {
        $('body').css('background-image', 'url(https://www.w3schools.com/html/pulpitrock.jpg)');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您可以使用css()方法更新背景图片。您还可以通过将图像src放在要单击的元素的data-*属性中来生成代码DRY。然后，您可以使用类对所有必需元素进行分组，并具有单个事件处理程序：

$(document).ready(function() {
  $('.bg-trigger').click(function() {
    $('body').css('background-image', `url("${$(this).data('src')}")`);
  });
});

<div class="bg-trigger" data-src="jefferyBig.jpg">Jeffery</div>
<div class="bg-trigger" data-src="eaglesBig.jpg">Eagles</div>
<div class="bg-trigger" data-src="wentzBig.jpg">Wentz</div>
<div class="bg-trigger" data-src="jenkinsBig.jpg">Jenkins</div>
<div class="bg-trigger" data-src="coxBig.jpg">Cox</div>

这种方法的优点是简化了JS代码，并且无需触摸JS代码即可无限扩展。要添加选项，您只需使用相应的class和data属性创建新的HTML元素。

将我的页面更新为jQuery

3 个答案: