我认为我的 jQuery 代码不工作。当我点击气泡时，它应该会消失，但什么也没有发生。我尝试粘贴这个 codepen，它可以在那里工作，但是当我在 sublime text 或任何其他编辑器上粘贴时它不起作用。任何帮助将不胜感激，谢谢。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background-color: #ffccff;
}
.circle {
width: 30%;
background: #e6ffff;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 90px;
box-shadow: 5px 5px 10px #ffffff;
}
#container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
</style>
<script>
$(".circle").click(function() {
$(this).removeClass("visible").addClass("hidden");
});
$(".restart").click(function() {
$(".circle").removeClass("hidden").addClass("visible");
});
</script>
</head>
<body>
<div id="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<button class="restart">Restart</button>
</div>
</body>
</html>最佳答案
当我将您的代码复制到此处的 jsFiddle 时:https://jsfiddle.net/r9zda0cv/ 一切正常。
试着准备好你的 javascript
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background-color: #ffccff;
}
.circle {
width: 30%;
background: #e6ffff;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 90px;
box-shadow: 5px 5px 10px #ffffff;
}
#container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
</style>
<script>
$(document).on("ready", function(){
$(".circle").click(function() {
$(this).removeClass("visible").addClass("hidden");
});
$(".restart").click(function() {
$(".circle").removeClass("hidden").addClass("visible");
});
});
</script>
</head>
<body>
<div id="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<button class="restart">Restart</button>
</div>
</body>
</html>
关于javascript - 如何修复 jQuery，使我的代码中的气泡在用户单击时消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56063762/