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はあるよ」(背景色：ミドリ)
「ないよ」(背景色：赤)に変わります。
ブラウザ上の表示
↓ クリック後
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/27 12:12
2019/03/27 12:22
2019/03/28 03:38
2019/03/28 03:46