jQuery 問題２

げんまる/ブロガー

問題


①button#hideをクリックしたらdiv#exを2秒で非表示
②button#showをクリックしたらdiv#exを2秒で表示
③button#showを何回クリックしたかdiv#exに文字列で数を表示
④button#showをクリックするたびにdiv#exの「border:〇px」の〇の箇所にクリックした数を入れていく
※クリック数で枠線が太くなっていく

↓これから追記していく

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jq　課題２</title>
 <style>
   #ex{
     width: 50px;
     height: 50px;
     border: 1px solid #ff0000;
   }
 
 </style>
</head>

<body>
 <div id="ex">ABC</div>
 
 <button id="show">show</button>
 <button id="hide">hide</button>
 
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
 
 
<script>
 
 </script>
</body>
</html>


正解

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jq　課題２</title>
 <style>
   #ex{
     width: 50px;
     height: 50px;
     border: 1px solid #ff0000;
   }
 
 </style>
</head>

<body>
 <div id="ex">ABC</div>
 
 <button id="show">show</button>
 <button id="hide">hide</button>
 
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
 
 
<script>
 let click_count = 0;  //クリックカウント
 let border_width = 1;  //ボーダーの太さ
 
 $("#hide").on("click" , function(){
   $("#ex").fadeOut(2000);
   click_count = 0
   $("#ex").html(click_count);
 });
 
   $("#show").on("click" , function(){
   $("#ex").fadeIn(2000);
   click_count = click_count+1;
   $("#ex").html(click_count);
   border_width = border_width+1;
   $("#ex").css("border", border_width+"px solid #ff0000");
 });
 

         
 </script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？