Web言語マスター復活への道/14日目

alice

2021年8月4日 23:24

正念場でございます。上手くいかなくてまっったく進まないんじゃないかっていう日もあります😔

目標

・jquery補足

本日の作業

・jQuery勉強①
一から書いてみました。jqueryコードがなければ2.3も見えていましたが、display=noneで隠しました。短い行で動きができるのは助かる

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>jQuery</title>
   <link rel="stylesheet" href="main.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
   <h1>hi everyone!</h1>
   <form>
       <div class="context">
           <div><h1>First</h1>
               This is the first page
               <a href="#">Next</a>
           </div>
           <div class="step">
               <h1>Second</h1>
               This is the second page
               <a href="#">next</a>
           </div>

           <div class="step">
               <h1>Third</h1>
               This is the third page
               <a href="#">next</a>
           </div>

       </div>
   </form>
</body>

</html>

main.js

$(document).ready(function () {
   $(".step").css("display", "none")
});

結果

次に、ページを遷移する画面を作成しました。
これはお手本見ながら書きました。this多用しすぎて、最初書いているときは？？？でしたが、順々に追っていくと、理解できました。これと同じようなのがかけるかというと、、。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>jQuery</title>
   <link rel="stylesheet" href="main.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
   <h1>hi everyone!</h1>
   <form>
       <div class="content">
           <div class="step">
               <div>
                   <h1>First</h1>
                   This is the first page
                   <a href="#">Next</a>
               </div>
           </div>
           <div class="step hidden">
               <h1>Second</h1>
               This is the second page
               <a href="#">next</a>
           </div>

           <div class="step hidden">
               <h1>Third</h1>
               This is the third page
               <a href="#">next</a>
           </div>

       </div>
   </form>
</body>

</html>

main.js

$(document).ready(function () {
   $(".hidden").css("display", "none");
   $("a").click(function(event){
       event.preventDefault();
       console.log($(this));
       var parent = $(this).closest(".step");
       var maincontent = $(".content>.step")
       var index = maincontent.index(parent)+1;
       parent.css ("display", "none");
       maincontent.eq(index).css("display", "block");
   });
});