.parent() toggleClass не работает

Question

У меня есть скрипка прямо здесь:. https://jsfiddle.net/qxnk05ua/2/

Когда я нажимаю кнопку, я хочу, чтобы фон, чтобы изменить цвет, очень простой. Почему это не работает?

Javascript:

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

Answer 1

Пожалуйста, добавьте библиотеку Jquery в вашем HTML

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

Answer 2

$(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 3

Вы пропустили ссылку JQuery. Добавьте ниже ссылку на свой код.

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

Вот работает demo