最終的にブロック領域を表示・非表示にする方法を説明しますが、 そのために使用する jQuery の css() メソッドについて説明します。
css() メソッドは要素の style 属性を設定をします。 メソッドの引数の記述方法で、1個の属性のみと複数の属性の設定ができます。
// 1個のstyle属性のみ
$('要素').css('プロパティ', '設定値');
// 複数のstyle属性
$('要素').css({'プロパティ':'設定値', 'プロパティ':'設定値', ... });
例としてHTML要素で class 名が「class1」とした場合において、1個の場合は「color」属性を「red」に、 複数の場合は「color」属性を「blue」、「font-weight」属性を「bold」に設定するには以下の様にします。
// 1個のstyle属性のみ
$('class1').css('color', 'red');
// 複数のstyle属性
$('class1').css({'color':'blue', 'font-weight':'bold'});
そこで、ブロック領域を表示・非表示の制御を行うには、「display」属性を「block」(表示)、または「none」(非表示)に設定します。
今回のデモ HTML ファイル側のソースを以下に示します。
■ブロック領域を表示・非表示にする
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 表示・非表示関数
function setDisplay() {
// チェック判定
if($("#chkOnOff").prop("checked")){
// 表示設定
$(".msg1").css("display", "block");
$("#area").css("display", "block");
} else {
// 非表示設定
$(".msg1").css("display", "none");
$("#area").css("display", "none");
}
return false;
}
</script>
</head>
<body>
<h2>test display ON/OFF</h2>
<label>
<input id="chkOnOff" type="checkbox" onclick="setDisplay();" checked="checked" value="1" />
表示ON/OFF
</label>
<br />
<div id="area" style="display: block;">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>11111111111222222222222222</p>
</div>
<p class="msg1" style="display: block;">テストメッセージ１</p>
<p class="msg1" style="display: block;">テストメッセージ２</p>
<p class="msg2" style="display: block;">テストメッセージ３</p>
</body>
</html>
".msg1" のセレクタで class="msg1" の p タグのみが制御され、 "#area" のセレクタで id="area" の div タグが制御されることが分かると思います。
PR
コメント