忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript jQueryの使い方(セレクタ)その4・複数セレクタの存在確認

前回は単独での jQuery のセレクタの存在確認を書きましたが、 今回は、複数のセレクタを書いた時にどうなるかを示します。

以下のソースにその例を示します。11行目でカンマ区切りで3個のIDセレクタを見ていますが、 その length プロパティが3の場合に各セレクタのクリック時の関数を定義する様にしています。

$() で返されるセレクタのオブジェクトには 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">メッセージ1</p>
    <p id="msgchg2">メッセージ2</p>
    <p id="msgchg3">メッセージ3</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

コメント

コメントを書く