addClass と removeClass を使用してトグル ハイライト効果を作成しようとしています。
<head>
<style>
.box-highlight {
border: 2px solid yellow;
}
</style>
<script type="text/javascript" src="javascript/vendor/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('click', function() {
if ($(this).hasClass('box-highlight')) {
$(this).removeClass('box-highlight');
}
$(this).addClass('box-highlight');
});
});
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: silver">
</div>
</body>
addClass は正しく機能していますが、removeClass は機能していません。toggleClass メソッドがあることは知っていますが、このコードの何が問題なのか疑問に思っています。