.parent().toggleClass 不工作

Question

我这里有一个fiddle：https://jsfiddle.net/qxnk05ua/2/

当我点击按钮时，我想让背景变色，很简单。为什么不起作用？

Javascript:

$(document).ready(function(){
  $('.block button').click(function(){
    $(this).parent().toggleClass('active');
  });
});

Answer 1

$(document).ready(function(){
  $('.block button').click(function(){
    $(this).parent().toggleClass('active');
  });
});

.block{
  width:200px;
  height:200px;
  background-color:#FFF;
}
.block.active{
  background-color:#333;
}

.block button{
  padding:5px;
  color:#333;
  width:100px;
  margin-left:calc(50% - 50px);
  margin-top:calc(50% - 20px);
  border:none;
  text-align:center;
  background-color:#FAC657;
  border-bottom:3px solid #CFA54A;
  cursor:pointer;
}
.block button:active{
  margin-top:calc(50% - 17px);
  border-bottom:none;
  outline:none;
  box-shadow:none;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
}
.block button:focus{
  outline:none;
  box-shadow:none;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="block">
  <button>
    change color
  </button>
</div>

Answer 2

您错过了 jQuery 参考。添加以下对您的代码的引用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

这是一个有效的 demo

Answer 3

请在您的 HTML

中添加 jquery 库

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js

.parent().toggleClass 不工作

.parent().toggleClass not working

javascript

css

jquery

toggleclass