jQuery - class属性の有無の切り替え(トグル)
公開日：2018-12-12
更新日：2019-05-14
更新日：2019-05-14
1. 概要
class 属性をトグルボタンのようにします。
class 属性がある場合は class 属性を削除して、
class 属性がない場合は class 属性を追加します。
class 属性がある場合は class 属性を削除して、
class 属性がない場合は class 属性を追加します。
$(セレクタ).toggleClass(class属性)
2.1 サンプル
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<style>
.info { color: skyblue; font-weight: :bold; }
</style>
<div id="a1" class="info">A-1</div>
<div id="a2" >A-2</div>
<!-- Script -->
<script>
$(function() {
$("#a1").toggleClass("info");
$("#a2").toggleClass("info");
});
</script>
</body></html>
実行結果：画面
2.2 サンプル
複数の class 属性を指定することもできます。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<style>
.info { color: skyblue; font-weight: :bold; }
.waku { border:1px solid gray; padding:4px; }
</style>
<div id="a1" class="waku info">A-1</div>
<div id="a2" class="waku" >A-2</div>
<div id="a3" >A-3</div>
<!-- Script -->
<script>
$(function() {
$("#a1").toggleClass("waku info");
$("#a2").toggleClass("waku info");
$("#a3").toggleClass("waku info");
});
</script>
</body></html>
実行結果：画面
