JavaScriptの勉強をいています。
以下のコードはJavaScript/jQueryのサンプルのコードで正常に動作します。
ですが、クラス名の指定に「.」が付与されているところが
2か所あり、なぜ「.」が付与されるのか理解できません。
1番の「$(idName).find('.check').addClass('crowded'); //1_「.」
2番の「$('.check').on('click',function(){ //2_「.」
はどうして、どちらともクラス名の前に「.」が必要なのでしょうか?
どちらも「.」は必要ないと思うのですが、実際に「.」を削除すると動作しません。
※文法的にはシングルクォーテーションで囲うだけで問題なく指定出来ると思うのですが。
1番と2番のコードでクラス名を指定するために「.」が必要である理由を教えて下さい。
=クラス名を指定する時に「.」が必要になる場合と、
必要ない場合の違いを教えて下さい。
追記
クラス名の指定に「.」が必要、、、というだけでも理解出来ないのですが
もっとわからないのは「('.check')」の方です。
仮に「.」が必要だとしても、なぜ「'」シングルクォーテーションの中に
「.」が入るのでしょうか?
「(.'check')」とか「find.('check')」ならなんとか納得出来ます。
※メソッドとして扱うから、、、という理由ですから。
このことも含め、クラス名のを指定する時に「.」が必要な場合と
必要ない場合の違いが全く理解できません。
すいませんが、詳しい方、説明の上手な方、よろしくお願いします。
※ネットで調べようとしたのですが、検索するためのキーワードが思いつきません。
似たような事例について詳しく書かれているページへのリンクでもOKです。
よろしく、お願いします。
コードは以下の通りです。
※必要ないと思いますが、json、HTML/CSSも記載しておきます。
JavaScript
1 2<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 3<script> 4$(document).ready(function() { 5 $.ajax({ 6 url: 'data-A.json', 7 dataType: 'json' 8 }) 9 .done(function(data) { 10 console.log('AA'); 11 $(data).each(function() { /*$(data).each*/ 12 if (this.crowded === 'yes') { 13 var idName = '#' + this.id; 14 $(idName).find('.check').addClass('crowded'); //1_「.」 15 } 16 }) //$(data).each 17 }) //done 18 .fail(function() { 19 window.alert('読み込みエラー'); 20 }) 21 22 //click 23 $('.check').on('click', function() { //2_「.」 24 if ($(this).hasClass('crowded')) { 25 $(this).text('crowdedはあるよ').addClass('red'); 26 } else { 27 $(this).text('ないよ').addClass('green'); 28 } 29 }); //click 30}); //ready 31</script> 32 33
↓ data-A.json
json
1[ 2 {"id":"js","crowded":"yes"}, 3 {"id":"security","crowded":"no"}, 4 {"id":"uiux","crowded":"no"} 5]
HTML
1<ul class="list"> 2<li id="js"> 3 <h4>JavaScript勉強会</h4> 4 <p class="check">空き状況を確認</p> 5</li> 6<li id="security"> 7 <h4>セキュリティ対策講座</h4> 8 <p class="check">空き状況を確認</p> 9</li> 10<li id="unix"> 11 <h4>UI/UXハッカソン</h4> 12 <p class="check">空き状況を確認</p> 13</li> 14</ul> 15
CSS
1.list li{ 2border: solid 1px; 3width: 12.5%; 4float: left; 5margin: 10px; 6list-style: none; 7text-align: center; 8} 9 10.list h4{margin: 10px;} 11 12.check{ 13background-color: cyan; 14margin: 0px 3px 3px 3px; 15cursor: pointer; 16} 17 18.red{background-color: #FF0000;} 19.green{background-color: #00FF00;}
画像はブラウザ上の表示です。
動作はjsonの内容を参照しており、
水色の背景色のテキスト「空き状況を確認」をクリックすると
テキストコンテンツが「checkはあるよ」(背景色:ミドリ)
「ないよ」(背景色:赤)に変わります。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/27 12:12
2019/03/27 12:22
2019/03/28 03:38
2019/03/28 03:46