先ずは jQuery のセレクタの使い方の例として以下のソースを見て下さい。 特に難しいところは無く、各ボタンのクリックに対応して p タグ の内容を書き変えています。
■最初の簡単な例
<html>
<head>
<meta charset="utf-8">
<title>test sel3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
// [Test1]ボタンで「メッセージ１」の変更
$('#Test1').click(function () {
$("#msgchg1").text("aaaaaaa");
});
// [Test2]ボタンで「メッセージ２」の変更
$('#Test2').click(function () {
$("#msgchg2").text("bbbbbbbbbbb");
});
});
</script>
</head>
<body>
<h2>test sel3</h2>
<p id="msgchg1">メッセージ１</p>
<p id="msgchg2">メッセージ２</p>
<br />
<button id="Test1">Test1</button><br />
<button id="Test2">Test2</button><br />
</body>
</html>
上の例でソースを入力する時に間違えたとして、以下の様に #Test2 の部分を #TestA にしたとします。
■ソースを間違えた簡単な例
<html>
<head>
<meta charset="utf-8">
<title>test sel3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
// [Test1]ボタンで「メッセージ１」の変更
$('#Test1').click(function () {
$("#msgchg1").text("aaaaaaa");
});
// [Test2]ボタンで「メッセージ２」の変更
$('#TestA').click(function () {
$("#msgchg2").text("bbbbbbbbbbb");
});
});
</script>
</head>
<body>
<h2>test sel3</h2>
<p id="msgchg1">メッセージ１</p>
<p id="msgchg2">メッセージ２</p>
<br />
<button id="Test1">Test1</button><br />
<button id="Test2">Test2</button><br />
</body>
</html>
上の例では、ボタンの ID と、クリック関数の宣言の ID が異なりますので、当然「メッセージ２」は変更されません。
そこでこれを回避するためには、クリック関数でセレクタが存在する時に関数の宣言を有効にすれば良く、無い場合にはその由をメッセージを表示してみます。
セレクタが存在するかどうかは、セレクタの length プロパティが０では無い場合に関数宣言を行います。 上記のソースを修正したものを以下に示します。 （.length != 0 の部分を [0] にしても同様な処理ができます）
■ソース修正した簡単な例
<html>
<head>
<meta charset="utf-8">
<title>test sel3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
// [Test1]ボタンで「メッセージ１」の変更
if($('#Test1').length != 0) {
$('#Test1').click(function () {
$("#msgchg1").text("aaaaaaa");
});
} else {
alert('セレクタ「#Test1」が存在しません');
}
// [Test2]ボタンで「メッセージ２」の変更
if($('#TestA').length != 0) {
$('#TestA').click(function () {
$("#msgchg2").text("bbbbbbbbbbb");
});
} else {
alert('セレクタ「#TestA」が存在しません');
}
});
</script>
</head>
<body>
<h2>test sel3</h2>
<p id="msgchg1">メッセージ１</p>
<p id="msgchg2">メッセージ２</p>
<br />
<button id="Test1">Test1</button><br />
<button id="Test2">Test2</button><br />
</body>
</html>
上の例を実行すると、ソースをロードした直後に、「セレクタ「#TestA」が存在しません」と表示されます。
この方法を使えば HTML 上の ID Class 名の間違いを探しやすと思いますが、如何でしょうか。
PR
コメント