実現したいこと
ID(id=one)を使って要素取得したいのですが、思ったように表示されない!
1.
2. class=two
3. id=one //ここが選択されて色が変わっている
4. class=two
5.
選択された要素の数は１個です。
発生している問題・分からないこと
先日も同じようなことで質問させていただきました。簡単な記述ミスでしたが、
これも参考サイトの通りに書いたつもりですが、ミスが先日と同じようなのですが、
main.jsのindexがグレイで使われていないと、説明されています。
どこを修正すればいいのか分かりません。
よろしくお願いいたします。
該当のソースコード
index.html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>基本的なセレクタの復習</title> 7 <link rel="stylesheet" href="./css/style.css"> 8 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hwg4gsxgFZhosEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 9 <script src="./js/main.js"></script> 10</head> 11<body> 12 13<!--IDを使って要素を取得する:1-1--> 14 15 <p class="count-container">選択された要素の数は<span class="count"></span>個です。</p> 16 17 <div>1. </div> 18 <div class="two">2. class=two</div> 19 <div id="one">3. id=one</div> 20 <div class="two">4. class=two</div> 21 <div>5. </div> 22
(function ($) { $(document).ready(function(){ let $selected = []; // ここにセレクタを書く $selected = $("#one"); // マッチした要素にスタイルを付与する $selected.each(function (index) { $(this).addClass("bingo"); }); $(".count").text($selected.length); }); })(jquery);
* { box-sizing: border-box; } body { margin: 0; padding: 0; } div{ padding: 5px 20px; background: #FEF58B; } div:not(:last-child) { margin-bottom: 5px; } p { margin: 5px 0; } label > span { display: block; } .parent { background: #FED28F; } .bingo { background: #EF476F; color: #fff; outline: 3px solid #EF476F; transition: background, outline, color 0.5s; } .container { display: flex; flex-wrap: wrap; } .container label{ flex-grow: 1; flex-basis: 100px; margin: 5px; padding: 10px; border: 1px solid #FFF; } .count-container { background: #555; color: #FFF; position: fixed; bottom: 0; right: 0; margin: 0 !important; padding: 5px 20px; border-radius: 20px 20px 0 0; opacity: 0.8; } .count { display: inline-block; height: 30px; width: 30px; margin: 0 5px; font-size: 19px; line-height: 30px; text-align: center; border-radius: 50%; color: #FFF; background: #118AB2; } .none { display: none; } .hidden { visibility: hidden; } .opacity { opacity: 0; }
試したこと・調べたこと
上記の詳細・結果
- class=two
- id=one //ここが選択されていない、色が変わらない
- class=two
選択された要素の数は個です。 //個数が空です。
補足
参考にさせてもらっているサイトです。
Query
windows10,vscodeで編集して実行、Google Chromeで表示しています。
0 コメント