我正在尝试更改按钮的类，因此当单击按钮时，它会隐藏一个 div，文本更改为显示，并且使用 addClass/removeClass 更改类，以便下一个单击事件可以拾取它将逆转该过程。
但是，它不太有效，我不确定为什么:/
这是我的代码。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vanishing Act</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="vanish1"></div>
<div class="vanish2"></div>
<div class="vanish3"></div>
<div class="vanish4"></div>
<br/>
<br />
<button class='first' value='button'>Hide the box!</button>
</body>
</html>
CSS:
.vanish1 {
height: 100px;
width: 100px;
display: inline-block;
background-color: #F38630;
border-radius: 5px;
}
.hide1 {
color: red;
}
JQ:
$(document).ready(function() {
$('.first').click(function() {
$('.vanish1').fadeOut('slow');
$(this).text('Show the box!');
$(this).addClass("hide1");
$(this).removeClass("first");
});
$('.hide1').click(function() {
$('.vanish1').fadeIn('slow');
$(this).text('Hide the box!');
$(this).removeClass("hide1");
$(this).addClass("first");
});
});
当我单击按钮时，div 成功隐藏并且类被更改(由 CSS 和 Chrome 开发工具确认)。但是当我再次点击它时，什么也没有发生..
如有任何帮助，我们将不胜感激!
最佳答案
您可以使用 delegate当你动态改变html时。看这个Fiddle 。
$('body').on('click', '.first', function() {
$('.vanish1').fadeOut('slow');
$(this).text('Show the box!');
$(this).addClass("hide1");
$(this).removeClass("first");
});
$('body').on('click', '.hide1', function() {
$('.vanish1').fadeIn('slow');
$(this).text('Hide the box!');
$(this).removeClass("hide1");
$(this).addClass("first");
});
关于jquery - 为什么我的新类(class)没有被录取？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14801520/