HTML 中的圖像標簽未點擊 jQuery
[英]Image Tag In HTML not clicking with jQuery
問題描述
我正在制作一個答題器游戲，但是當我單擊它時，我的其中一個圖像（用於升級）將不起作用。 問題出在輔助 div 圖像中。 我正在為 js 使用 HTML、css、javascript 和 jQuery
代碼：
var clicks = 0; var perclick = 1; var persec = 0; var costup1 = 12; var currentup1 = 0; var costup2 = 27; var currentup2 = 0; setInterval(sec, 1000) //click and upgrade $(document).ready(function() { $("#sun").click(function() { add() }) $("#up1").click(function() { if (clicks >= costup1) { clicks = clicks - costup1 currentup1 = currentup1 + 1; costup1 = ((currentup1 + 1) * 12); perclick = perclick + 1 update() } else { alert("You Don't Have Enough Clicks"); } }) $("#up2").click(function() { if (click >= currentup2) { clicks = clicks - costup2 currentup2 = currentup2 + 1; costup2 = ((currentup2 + 1) * 27) persec = persec + 1; update() } else { alert("You Don't Have Enough Clicks") } }) //Save and load $(document).ready(function() { $("#save").click(function() { localStorage.setItem("clicks", clicks) localStorage.setItem("perclick", perclick) localStorage.setItem("persec", persec) localStorage.setItem("currentup1", currentup1) }) $("#load").click(function() { clicks = localStorage.getItem("clicks") clicks = parseInt(clicks) perclick = localStorage.getItem("perclick") perclick = parseInt(perclick) persec = localStorage.getItem("persec") persec = parseInt(persec) currentup1 = localStorage.getItem("currentup1") currentup1 = parseInt(currentup1) }) }) }) function add() { clicks = clicks + perclick; update() } function sec() { clicks = clicks + persec; update() } function update() { document.getElementById("costmag").innerHTML = ((currentup1 + 1) * 12) + " Clicks"; document.getElementById("curmag").innerHTML = "You Own " + currentup1 + " Magnifying Glasses(+1 Clicks Per Click)" document.getElementById("scoreText").innerHTML = clicks + " Clicks"; document.getElementById("clickText").innerHTML = "You Are Gaining " + perclick + " Clicks Per Click" document.getElementById("secText").innerHTML = "You Are Gaining " + persec + " Clicks Per Second" document.getElementById("helpcur").innerHTML = "You Have " + currentup2 + " Helpers(+1 Clicks Per Second)" document.getElementById("helpcos").innerHTML = ((currentup2 + 1) * 27) + " Clicks"; }
img { -webkit-user-drag: none; } button { box-sizing: border-box; background-color: #000000; color: cyan; border: none; font-size: 16px; } body { font-family: Architects Daughter; } ```
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Clicker Game Made With jQuery</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="styles:css"> </head> <body> <p id="clickText"> You Are Gaining 1 Clicks Per Click </p> <p id="secText"> You Are Gaining 0 Clicks Per Second </p> <a href="javascript;."><img src="Images/sun:png" id="sun"></a> <p id="scoreText">0 Clicks</p> <div class="magnify"> <p id="curmag"> You Own 0 Magnifying Glasses(+1 Clicks Per Click)</p> <a href="javascript;."><img src="Images/magnify-glass:png" width="50px" height="50px" id="up1"></a> <p id="costmag"> 12 Clicks </p> </div> <div class="helper"> <p id="helpcur"> You Have 0 Helpers (+1 Clicks Per Second)</p> <a href="javascript;."><img src="Images/helper.png" width="60px" height="80px" id="up2"></a> <p id="helpcos"> 27 Clicks </p> </div> <div class="svld"> <button id="save">Save</button> <button id="load">Load</button> </div> </body> </html>
1 個解決方案
解決方案1
0 2022-01-13 03:43:42
在幫助圖像點擊事件的 if 條件下使用clicks變量。
var clicks = 0; var perclick = 1; var persec = 0; var costup1 = 12; var currentup1 = 0; var costup2 = 27; var currentup2 = 0; setInterval(sec, 1000) //click and upgrade $(document).ready(function() { $("#sun").click(function() { add() }) $("#up1").click(function() { if (clicks >= costup1) { clicks = clicks - costup1 currentup1 = currentup1 + 1; costup1 = ((currentup1 + 1) * 12); perclick = perclick + 1 update() } else { alert("You Don't Have Enough Clicks"); } }) $("#up2").click(function() { if (clicks >= currentup2) { clicks = clicks - costup2 currentup2 = currentup2 + 1; costup2 = ((currentup2 + 1) * 27) persec = persec + 1; update() } else { alert("You Don't Have Enough Clicks") } }) //Save and load $(document).ready(function() { $("#save").click(function() { localStorage.setItem("clicks", clicks) localStorage.setItem("perclick", perclick) localStorage.setItem("persec", persec) localStorage.setItem("currentup1", currentup1) }) $("#load").click(function() { clicks = localStorage.getItem("clicks") clicks = parseInt(clicks) perclick = localStorage.getItem("perclick") perclick = parseInt(perclick) persec = localStorage.getItem("persec") persec = parseInt(persec) currentup1 = localStorage.getItem("currentup1") currentup1 = parseInt(currentup1) }) }) }) function add() { clicks = clicks + perclick; update() } function sec() { clicks = clicks + persec; update() } function update() { document.getElementById("costmag").innerHTML = ((currentup1 + 1) * 12) + " Clicks"; document.getElementById("curmag").innerHTML = "You Own " + currentup1 + " Magnifying Glasses(+1 Clicks Per Click)" document.getElementById("scoreText").innerHTML = clicks + " Clicks"; document.getElementById("clickText").innerHTML = "You Are Gaining " + perclick + " Clicks Per Click" document.getElementById("secText").innerHTML = "You Are Gaining " + persec + " Clicks Per Second" document.getElementById("helpcur").innerHTML = "You Have " + currentup2 + " Helpers(+1 Clicks Per Second)" document.getElementById("helpcos").innerHTML = ((currentup2 + 1) * 27) + " Clicks"; }
img { -webkit-user-drag: none; } button { box-sizing: border-box; background-color: #000000; color: cyan; border: none; font-size: 16px; } body { font-family: Architects Daughter; } ```
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Clicker Game Made With jQuery</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="styles:css"> </head> <body> <p id="clickText"> You Are Gaining 1 Clicks Per Click </p> <p id="secText"> You Are Gaining 0 Clicks Per Second </p> <a href="javascript;."><img src="Images/sun:png" id="sun"></a> <p id="scoreText">0 Clicks</p> <div class="magnify"> <p id="curmag"> You Own 0 Magnifying Glasses(+1 Clicks Per Click)</p> <a href="javascript;."><img src="Images/magnify-glass:png" width="50px" height="50px" id="up1"></a> <p id="costmag"> 12 Clicks </p> </div> <div class="helper"> <p id="helpcur"> You Have 0 Helpers (+1 Clicks Per Second)</p> <a href="javascript;."><img src="Images/helper.png" width="60px" height="80px" id="up2"></a> <p id="helpcos"> 27 Clicks </p> </div> <div class="svld"> <button id="save">Save</button> <button id="load">Load</button> </div> </body> </html>
通過單擊圖像，jQuery，HTML，CSS嘗試更改背景圖像
[英]Trying to change background image, by clicking on an image, jQuery, HTML, CSS
單擊 html<a>標簽</a>后 Javascript 不起作用<a>？</a>
[英]Javascript is not working after clicking on html <a> tag?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.