ログイン
問題4

クリックした番目をアラートに出そう

アイコン画像

問題4:クリックした番目をアラートに出そう

何番目の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¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              $(function(){
  $('li').on('click',function(){
    let click_li_num = $('li').index(this);
    alert('あなたは' + (click_li_num + 1) + '番目を押しました!');
  });
});
¥JavaScript¥
            
              <!DOCTYPE html>
<html lang="">
<head>
	<meta charset="UTF-8">
	<title>タイトル</title>
	<link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet">
	<meta name="viewport" content="width=device-width">
	<style>
		*{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;
		}
	</style>
</head>
<body>
	
	<ul class="list">
		<li>1番目の忍</li>
		<li>2番目の忍</li>
		<li>3番目の忍</li>
		<li>4番目の忍</li>
		<li>5番目の忍</li>
	</ul>
	
	
	<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

</body>
</html>
¥HTML¥
            

コメントのアイコン解説

「変数 = $('li').index(this);」このパターンは良く使うので、
覚えておこう。
番目を取得すると言うことは、他の場所で使う可能性が高いので、
変数に入れるようにしよう。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
1.JavaScriptでできること
続きの動画を見たい方は公式LINEから「JavaScript」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる