用于切换类问题的Javascript按钮

Question

I am new at html/css/js and I have been doing a project tutorial to learn the content. 我是html / css / js的新手，我一直在做一个项目教程来学习内容。 I looked at other JS button issues but I'm not sure how it applies to my case (since I'm new). 我查看了其他JS按钮问题，但是我不确定它如何适用于我的情况（因为我是新来的）。

The project has us create a robot that has flashing eyes once a button is clicked. 该项目让我们创建了一个机器人，一旦单击按钮，该机器人的眼睛就会闪烁。 If that button is clicked again then the flashing stops. 如果再次单击该按钮，则闪烁停止。

Here is the relevant code: 以下是相关代码：

<!DOCTYPE html>

<head>
<script src="/assets/jquery.js"></script>
<link href='https://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'>

<style>
...

/* Other parts of robot */

@keyframes blink {
  50% {
    background: radial-gradient(circle, red 15%, transparent 40%), #cc5;
    background-size: 75px 150px;
  }
}
@-webkit-keyframes blink {
  50% {
    background: -webkit-radial-gradient(circle, red 15%, transparent 40%), #cc5;
    background-size: 75px 150px;
  }
}
@-moz-keyframes blink {
  50% {
    background: -moz-radial-gradient(circle, red 15%, transparent 40%), #cc5;
    background-size: 75px 150px;
  }
}

.laser {
  animation: blink 5s infinite;
  -webkit-animation: blink 5s infinite;
  -moz-animation: blink 5s infinite;
}
.brain {
  background: radial-gradient(circle, white 15%, transparent 40%), #cc5;
  background: -moz-radial-gradient(circle, white 15%, transparent 40%), #cc5; 
  background: -webkit-radial-gradient(circle, white 15%, transparent 40%), #cc5;
  background-size: 75px 150px;
  height: 150px;
  width: 150px;
  border-radius: 60px 60px 10px 10px;
  border-bottom: 40px solid #666;
  position: relative;
  left: 70px;
}
.foot {
...
}
</style>
</head>

<body>

<div class="robot">
  <div class="beep"></div>
  <div class="brain"></div>
  <div class="torso">
    <div class="left">j</div>
    <div class="right">j</div>
  </div>
  <div class="foot"></div>
</div>

<button class="flash">laser eyes on/off</button>
<button class="color">change color!</button>

<script>
// Button to toggle
$('.flash').click(function() {
  $('.brain').toggleClass('laser');
});

</script>

</body>

I am wondering if there's anything in particular that is wrong as I am unsure how to correct it even though I have placed everything in the right place, according to the tutorial. 我想知道是否有什么特别错误的地方，即使我将所有内容都放置在正确的位置，我也不确定如何纠正它。 There was a mention of including more CSS identifies in HTML elements but I'm not sure how that would change anything here. 有人提到在HTML元素中包含更多CSS标识，但是我不确定这将如何改变这里的内容。

Answer 1

Again a case of not wrapping your jQuery code within $(document).ready(function(){}) 再一次不将您的jQuery代码包装在$(document).ready(function(){})

Change your jQuery code to, 将您的jQuery代码更改为

$(document).ready(function(){
$('.flash').click(function() {
  $('.brain').toggleClass('laser');
});
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!DOCTYPE html> <head> <link href='https://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'> <style> ... /* Other parts of robot */ @keyframes blink { 50% { background: radial-gradient(circle, red 15%, transparent 40%), #cc5; background-size: 75px 150px; } } @-webkit-keyframes blink { 50% { background: -webkit-radial-gradient(circle, red 15%, transparent 40%), #cc5; background-size: 75px 150px; } } @-moz-keyframes blink { 50% { background: -moz-radial-gradient(circle, red 15%, transparent 40%), #cc5; background-size: 75px 150px; } } .laser { animation: blink 5s infinite; -webkit-animation: blink 5s infinite; -moz-animation: blink 5s infinite; } </style> </head> <body> <div class="robot"> <div class="beep"></div> <div class="brain" height="50px">df</div> <div class="torso"> <div class="left">j</div> <div class="right">j</div> </div> <div class="foot"></div> </div> <button class="flash">laser eyes on/off</button> <button class="color">change color!</button> <script> // Button to toggle $(document).ready(function(){ $('.flash').click(function() { $('.brain').toggleClass('laser'); }); }); </script> </body>

用于切换类问题的Javascript按钮

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-07-19 17:19:08

用于切换类问题的Javascript按钮

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-19 17:19:08

解决方案1
0 已采纳 2015-07-19 17:19:08