我不知道為什么當我在我的 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>