JavaScript
Googleでログイン
問題4：クラス名を取得しよう
クリックしたliタグのクラス名を取得して、
アラートに出してみよう。
アラートに出してみよう。
あらかじめエディタに書くコード
<ul class="list">
<li class="apple">リンゴ</li>
<li class="orange">みかん</li>
<li class="grape">ぶどう</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: #0c4dd5;
margin-right: 20px;
margin-bottom: 10px;
color: #fff;
font-size: 20px;
cursor: pointer;
}
¥CSS¥
期待する画面
解答ソースコード
$(function(){
$('li').on('click',function(){
alert($(this).attr('class'));
});
});
¥JavaScript¥
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<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: #0c4dd5;
margin-right: 20px;
margin-bottom: 10px;
color: #fff;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="list">
<li class="apple">リンゴ</li>
<li class="orange">みかん</li>
<li class="grape">ぶどう</li>
</ul>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</body>
</html>
¥HTML¥
#忍者CODE無料問題集で活動を記録しよう
完了にする！
1.JavaScriptでできること
実務で頻繁に使う事がある上に
idやdata属性、src属性も取得できるので覚えておこう。