問題
4
JavaScript
クリックした番目をアラートに出そう
JavaScriptの問題に挑戦しよう!
問題
「クリックした番目をアラートに出そう」
何番目のliをクリックしたかをアラートに出そう!
あらかじめエディタに書くコード
<ul class="list">
<li>1番目の忍</li>
<li>2番目の忍</li>
<li>3番目の忍</li>
<li>4番目の忍</li>
<li>5番目の忍</li>
</ul>
¥HTML¥
*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}
.list{
width: 1000px;
margin: 300px auto 0 auto;
overflow: hidden;
}
.list li{
padding: 20px;
background-color: #73a5ff;
margin-right: 20px;
margin-bottom: 10px;
color: #fff;
font-size: 20px;
cursor: pointer;
}
¥CSS¥
期待する画面
解答と解説(クリックした番目をアラートに出そう)
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
「変数 = $('li').index(this);」このパターンは良く使うので、
覚えておこう。
番目を取得すると言うことは、他の場所で使う可能性が高いので、
変数に入れるようにしよう。