Question

let playing = false
let score

$(function() {
  // start smash
  $('startgame').click(function() {
    if (playing == true) {
      location.reload()
    } else {
      playing = true
     score = 0
      $('#scorevalue').html(score)
      $('life').show()
    }
  })
})

html {
  height: 100%;
  background: skyblue;
}

#container {
  height: 640px;
  width: 700px;
  background-color: white;
  margin: 70px auto;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0px 4px 3px 0px;
  position: relative;
}
#scorebox {
  height: 30px;
  width: 90px;
  background-color: powderblue;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 2.5px 4px 0px;
  padding: 4px;
  position: absolute;
  left: 600px;
  top: 10px;
}
#fruitsdisp {
  height: 460px;
  width: 560px;
  background-color: ghostwhite;
  padding: 10px;
  border-radius: 15px;
  position: relative;
  left: 60px;
  top: 60px;
  box-shadow: 0px 1px 2px 0px;
}

#startgame {
  height: 35px;
  width: 200px;
  background-color: powderblue;
  border-radius: 5px;
  box-shadow: 0px 2.5px 4px 0px;
  font-family: fantasy;
  font-size: 20px;
  padding-top: 5px;
  text-align: center;
  position: absolute;
  left: 280px;
  top: 610px;
}
#gameover {
  height: 260px;
  width: 480px;
  background-color: gainsboro;
  padding: 10px;
  border-radius: 15px;
  position: absolute;
  left: 120px;
  top: 170px;
  box-shadow: 0px 1px 2px 0px;
  text-align: center;
  font-size: 5em;
  z-index: 2;
  font-family: monospace;
  display: none;
}
#life {
  height: 35px;
  width: 130px;
  background-color: powderblue;
  border-radius: 5px;
  box-shadow: 0px 2.5px 4px 0px;
  font-family: serif;
  font-size: 20px;
  padding-top: 5px;
  text-align: center;
  position: absolute;
  top: 10px;
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Fruit Smash</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,user-scalable=yes"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"
    />
  </head>
  <body>
    <div id="container">
      <div id="scorebox">score: <span id="scorevalue">0</span></div>

      <div id="fruitsdisp"></div>

      <div id="startgame">SMASH</div>

      <div id="gameover">GAME OVER! YOUR SCORE IS <span>0</span></div>

      <div id="life">life</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="jquery.js"></script>
  </body>
</html>

由于我的jquery代码未运行，我被困在这里。这是我的html，css和jquery代码。

单击“粉碎”按钮后，它应该显示<div id="life">life</div>元素，但这没有发生，我也不知道为什么。

我一直在使用方括号来运行我的代码。 HTML和CSS运行正常，但jQuery不是。我想知道我在哪里出错了。

Answer 1

您使用了错误的选择器， id选择器应以“＃”为前缀

var playing = false;
var score;

$(function() {
    
    //start smash
    $("#startgame").click(function(){
       
        if(playing == true){
            location.reload();
        }else{
            
            playing=true;
            score=0;
            $("#scorevalue").html(score);
            
            $("#life").show();
            
        }
        
    });
    
    



});

html{
    height: 100%;
    background: skyblue;
}


#container{
    height: 640px;
    width: 700px;
    background-color: white;
    margin:  70px auto ;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 3px 0px;
    position: relative;
}
#scorebox{
    height: 30px;
    width: 90px;
    background-color: powderblue;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 2.5px 4px 0px;
    padding: 4px;
    position: absolute;
    left: 600px;
    top: 10px;
    
}
#fruitsdisp{
    height:460px;
    width: 560px;
    background-color: ghostwhite;
    padding: 10px;
    border-radius: 15px;
    position: relative;
    left: 60px;
    top: 60px;
    box-shadow: 0px 1px 2px 0px;
}

#startgame{
    height: 35px;
    width: 200px;
    background-color: powderblue;
    border-radius: 5px;
    box-shadow: 0px 2.5px 4px 0px;
    font-family: fantasy;
    font-size: 20px;
    padding-top: 5px;
    text-align: center;
    position: absolute;
    left: 280px;
    top: 610px;
}
#gameover{
     height:260px;
    width: 480px;
    background-color: gainsboro;
    padding: 10px;
    border-radius: 15px;
    position: absolute;
    left: 120px;
    top: 170px;
    box-shadow: 0px 1px 2px 0px;
    text-align: center;
   font-size: 5em;
    z-index:2;
    font-family: monospace;
    display: none;
}
#life{
     height: 35px;
    width: 130px;
    background-color: powderblue;
    border-radius: 5px;
    box-shadow: 0px 2.5px 4px 0px;
    font-family:serif;
    font-size: 20px;
    padding-top: 5px;
    text-align: center;
    position: absolute;
    top: 10px;
    display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
        <title>Fruit Smash</title>    
        <meta charset="utf-8">
        <meta name = "viewport"
              content = "width=device-width, initial-scale=1,user-scalable=yes">
    <link rel="stylesheet"
          href = "style.css">
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    

</head>

<body>
    
    <div id ="container">
        
        <div id = "scorebox">
    score: <span id="scorevalue">0</span>
    </div>
        
    <div id="fruitsdisp">
        </div>
        
        <div id="startgame">SMASH
        </div>
        
        <div id="gameover">GAME OVER! 
        YOUR SCORE IS <span>0</span></div>
        
        <div id="life">life
        </div>
    
    
    
    </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
    </script>
    
    <script src="jquery.js">
    </script>

    
</body>








</html>

我的脚本完整无缺，为什么我的jquery代码无法正常工作？

1 个答案: