我不知道为什么当我在我的 HTML 程序上单击“Click = Past”按钮时，绿色字符图像不显示我在可汗学院尝试过

Question

当您单击“Click = Past”时，应该有一个绿色字符图像，与您在程序开始时看到的相同。 如果您通过可汗学院的代码，字符图像最有可能显示，但如果您不想这样做，请随意将其粘贴到其他地方，例如重新复制并更改图像。 这是我第一次使用我只是在一些东西上即兴创作的按钮（尽管我做的一切都是正确的，并且检查了我的代码一百万次并且找不到任何错误。）。 这也是我第一次使用堆栈溢出，如果我做错了什么，请随时告诉我。

我的代码：

 var leafy = function() { $("img").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/beach-with-palm-trees.png").css("position", "relative").css("top", "0").css("left", "0").css("z-index", "1"); $(".leafers").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png").css("position", "absolute").css("top", "210px").css("left", "378px").css("z-index", "3"); $("p").html("Life is to short to waste time,<br> I should have done something with mine.<br> It's too late now. <strong>-Leafers ultimate</strong>").css("background-color", "rgb(0, 255, 230)").css("color", "rgb(0, 0, 0").css("font-family", "Georgia").css("top", "209px").css("left", "148px").css("z-index", "4"); $(".past").text("Click = Past").css("color", "white").css("top", "354px").css("left", "22px").css("z-index", "2"); } var omg = function() { $("img").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png").css("top", "0px").css("left", "0px").css("z-index", "1"); $("img").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png").css("position", "absolute").css("top", "0px").css("left", "0px").css("z-index", "2"); $("p").html("Lets party and have fun.<br> <strong>-Leafers seedling</strong>").css("background-color", "rgb(245, 135, 245)").css("color", "rgb(255, 205, 3)").css("font-family", "cursive").css("z-index", "5"); $("button").text(Click = Future).css("z-index", "4").addClass("Future"); $("button").css("top", "359px").css("left", "22px").css("z-index", "3").addClass("past"); } $(".Future").on("click", function() { console.log("yay"); leafy(); }); $(".past").on("click", function() { console.log("lesss gooo"); omg(); });

 .leafers { position: absolute; top: 210px; left: 378px; z-index: 3; }.seedling { background-color: rgb(245, 135, 245); color: rgb(255, 205, 3); font-family: cursive; font-size: 12px; position: absolute; top: 233px; left: 264px; z-index: 4; }.scape { z-index: 2; }.Future { background-color: red; color: white; position: absolute; z-index: 5; top: 379px; left: 22px; }.past { background-color: rgb(10, 26, 252); color: white; position: absolute; top: 386px; z-index: 1; left: 26px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <img class="scape" src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-seedling.png" class="leafers"> <p class="seedling"> "Lets party and have fun.<br> <strong>-Leafers seedling"</strong> </p> <button class="Future">Click=Future</button> <button Class="past"></button>

Answer 1

您的代码中有一个明确的错误（ Click = Future应该是文本，所以用引号分隔），但这不是唯一的问题。

另一个问题是，当您通过 JavaScript 设置“过去”时，您不使用“绿叶”字符图像，而是使用烟花（在我看来，这算作错字）。

 function omg() { $(".scape").attr('src', 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png').css("position", "relative").css("top", "0").css("left", "0").css("z-index", "1"); $(".leafers").attr('src', 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-seedling.png').css("position", "absolute").css("top", "210px").css("left", "378px").css("z-index", "3"); $('.seedling').html('"Lets party and have fun.<br><strong>-Leafers seedling"</strong>').css("background-color", "rgb(0, 255, 230)").css("color", "rgb(0, 0, 0").css("font-family", "Georgia").css("top", "209px").css("left", "148px").css("z-index", "4"); $('.future').text('Click = future') $('.past').text('') } function leafy() { $(".scape").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/beach-with-palm-trees.png").css("top", "0px").css("left", "0px").css("z-index", "1"); $(".leafers").attr("src", "https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png").css("position", "absolute").css("top", "210px").css("left", "378px").css("z-index", "3"); $(".seedling").html("Lets party and have fun.<br> <strong>-Leafers seedling</strong>").css("background-color", "rgb(245, 135, 245)").css("color", "rgb(255, 205, 3)").css("font-family", "cursive").css("z-index", "5"); $(".future").text("Click = Future").css("z-index", "4").addClass("Future"); $(".past").text("Click = Past").css("top", "359px").css("left", "22px").css("z-index", "3").addClass("past"); } // to get the first setup omg() $(".future").on("click", function() { console.log("yay"); leafy(); }); $(".past").on("click", function() { console.log("lesss gooo"); omg(); });

 html, body { margin: 0; }.leafers { position: absolute; top: 210px; left: 378px; z-index: 3; }.seedling { background-color: rgb(245, 135, 245); color: rgb(255, 205, 3); font-family: cursive; font-size: 12px; position: absolute; top: 233px; left: 264px; z-index: 4; }.scape { z-index: 2; }.future { background-color: red; color: white; position: absolute; z-index: 5; top: 379px; left: 22px; }.past { background-color: rgb(10, 26, 252); color: white; position: absolute; top: 386px; z-index: 1; left: 26px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <img class="scape" src=""> <img class="leafers" src=""> <p class="seedling"></p> <button class="future"></button> <button class="past"></button>

TBH，我会完全不同。 考虑到我可以从代码和行为中读取的用例，我宁愿这样做（好吧，我会把 jQuery 排除在外，但是嘿，YOLO）：

 // utility functions const getImgHtml = ({ src }) => `<img src="${src}" />` const setImgHtml = ({ selector, html }) => jQuery(selector).html(html) const setSceneImg = ({ src, selector }) => { const html = getImgHtml({ src }) setImgHtml({ selector, html }) } // setting the scene function const setScene = ({ bgSrc, charSrc, btnPastShow, btnFutureShow }) => { setSceneImg({ src: bgSrc, selector: ".background" }) setSceneImg({ src: charSrc, selector: ".character" }) jQuery('.btn.past').css('display', btnPastShow) jQuery('.btn.future').css('display', btnFutureShow) } // creating the two different scenes const omg = { bgSrc: 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/seasonal/fireworks-over-harbor.png', charSrc: 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-seedling.png', btnPastShow: 'none', btnFutureShow: 'block', } const leafy = { bgSrc: 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/landscapes/beach-with-palm-trees.png', charSrc: 'https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leafers-ultimate.png', btnPastShow: 'block', btnFutureShow: 'none', } jQuery(document).ready(function($) { // loading the first scene setScene(omg) // button click handlers $('.btn.future').on('click', function() { setScene(leafy) }) $('.btn.past').on('click', function() { setScene(omg) }) })

 html, body { margin: 0; }.container { position: relative; height: min-content; }.character { position: absolute; bottom: 30px; right: 30px; }.btn { position: absolute; left: 30px; }.btn.future { bottom: 40px; background: red; color: white }.btn.past { bottom: 55px; background: green; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="background"></div> <div class="character"></div> <button class="btn future">Future</button> <button class="btn past">Past</button> </div>