前回は単独での jQuery のセレクタの存在確認を書きましたが、 今回は、複数のセレクタを書いた時にどうなるかを示します。
以下のソースにその例を示します。11行目でカンマ区切りで3個のIDセレクタを見ていますが、 その length プロパティが３の場合に各セレクタのクリック時の関数を定義する様にしています。
$() で返されるセレクタのオブジェクトには length プロパティを持っていて、セレクタとして認識された個数を返します。
クリック時の関数の中では自分自身の ID名 を取得し番号の部分を抽出しています。 さらにその番号を使ってメッセージ領域の ID名 を作成し内部のHTMLを書き変えています。
■複数セレクタの存在確認の例
<html>
<head>
<meta charset="utf-8">
<title>test sel</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
// [TestN]ボタンで「メッセージN」の変更
if($("#Test1,#Test2,#Test3").length == 3) {
//セレクタの個数確認OK
$("#Test1,#Test2,#Test3").click(function () {
//ID名取得
var id = $(this).attr("id");
//番号の抽出
var no = id.replace("Test", "");
//pタグIDを指定して内部 HTML 書換
$("#msgchg" + no).text("aaaaaaa");
});
} else {
alert('セレクタ「Test1」「Test2」「Test3」の何れかが存在しません');
}
});
</script>
</head>
<body>
<h2>test sel</h2>
<p id="msgchg1">メッセージ１</p>
<p id="msgchg2">メッセージ２</p>
<p id="msgchg3">メッセージ３</p>
<br />
<button id="Test1">Test1</button><br />
<button id="Test2">Test2</button><br />
<button id="Test3">Test3</button><br />
</body>
</html>
上の例でボタンのIDで Test3 の部分を仮に TestA にすると、 フォームのロードの直後に「セレクタ「Test1」「Test2」「Test3」の何れかが存在しません」のメッセージが表示されます。
PR
コメント