Question

我是html / css / js的新手，我一直在做一个项目教程来学习内容。我查看了其他JS按钮问题，但我不确定它是如何适用于我的情况（因为我是新手）。

项目让我们创建了一个机器人，一旦点击一个按钮就会闪烁。如果再次单击该按钮，则闪烁停止。

以下是相关代码：

<!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>

我想知道是否有任何特别的错误，因为我不确定如何纠正它，即使我把所有东西放在正确的位置，根据教程。有人提到在HTML元素中包含更多CSS标识，但我不确定这会如何改变。

Answer 1

再次表示未在$(document).ready(function(){})

中包装jQuery代码

将您的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 个答案: