jQueryスクリプトをプレーンなjavascriptで動作させる

Question

私はこの単純なjQueryスクリプトを使用して、クリックと遅延に関するいくつかの要素を隠して表示します。私が必要とするのは、JSライブラリなしでJavascriptでこの作業を行うことです。

本当にこの点で助けていただければ幸いです。

ここでは、コードです：

$(document).ready(function() { 
 
     $(".bq1").click(function() { 
 
      $("#q1").fadeOut(0), $("#q2").fadeIn(500) 
 
     }), $(".bq2").click(function() { 
 
      $("#q2").fadeOut(0), $("#q3").fadeIn(500) 
 
     }), $(".bq3").click(function() { 
 
      $("#q3").fadeOut(0), $("#q4").fadeIn(500) 
 
     }), $(".bq4").click(function() { 
 
      window.scrollTo(0, 0), $("#content1").fadeOut(0), $("#content2").fadeIn(), setTimeout(function() { 
 
       $("#result1").fadeIn(1e3) 
 
      }, 3e3), setTimeout(function() { 
 
       $("#result2").fadeIn(1e3) 
 
      }, 4500), setTimeout(function() { 
 
       $("#result3").fadeIn(1e3) 
 
      }, 6e3), setTimeout(function() { 
 
       $("#content2").fadeOut() 
 
      }, 7500), setTimeout(function() { 
 
       $("#content3").fadeIn() 
 
      }, 7500) 
 
     }) 
 
    });

#q2,#q3,#q4,#content1,#content2,#content3,.result {display: none; } 
 
.bq1,.bq2,.bq3,.bq4 { cursor: pointer; padding: 3px; margin: 3px; background: grey; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="q1"> 
 
    <p class="question"><strong>Question 1 of 4:</strong> How many years have you been with our service?</p> 
 
    <div class="button bq1">Less than 1 year</div> 
 
    <div class="button bq1">1-5 years</div> 
 
    <div class="button bq1">More than 5 years</div> 
 
</div> 
 
<div id="q2"> 
 
    <p class="question"><strong>Question 2 of 4:</strong> Have you ever used our online support?</p> 
 
    <div class="button bq2">Yes</div> 
 
    <div class="button bq2">No</div> 
 
</div> 
 
<div id="q3"> 
 
    <p class="question"><strong>Question 3 of 4:</strong> What is your primary use for our Service? </p> 
 
    <div class="button bq3">Work</div> 
 
    <div class="button bq3">Leisure</div> 
 
    <div class="button bq3">Others</div> 
 
</div> 
 
<div id="q4"> 
 
    <p class="question"><strong>Question 4 of 4:</strong>Would you recommend our service to your friends and family?</p> 
 
    <div class="button bq4">Yes</div> 
 
    <div class="button bq4">No</div> 
 
    <div class="button bq4">Maybe</div> 
 
</div> 
 
</div> 
 
<div class="Mayn-content" id="content2"> 
 
    <h1 style="text-align:center;">Submitting Answers</h1> 
 
    <div class="loading"></div> 
 
    <p class="result" id="result1">Verifying Customer...</p> 
 
    <p class="result" id="result2">Checking Database...</p> 
 
    <p class="result" id="result3">Analyzing...</p> 
 
</div> 
 
<div class="Mayn-content" id="content3"> 
 
    <h1 style="text-align:center;">Thank you for your opinion!</h1> 
 
</div>

Answer 1

このような何か - 私はすべての4件の結果をしませんでした - フェードインとアウトをきれいにすることができます（http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/から取られた）が、人々は通常は有料カスタムコードのこの種

// fade out 
 

 
function fadeOut(el) { 
 
    el.style.opacity = 1; 
 

 
    (function fade() { 
 
    if ((el.style.opacity -= .1) < 0) { 
 
     el.style.display = "none"; 
 
    } else { 
 
     requestAnimationFrame(fade); 
 
    } 
 
    })(); 
 
} 
 

 
// fade in 
 

 
function fadeIn(el, display) { 
 
    el.style.opacity = 0; 
 
    el.style.display = display || "block"; 
 

 
    (function fade() { 
 
    var val = parseFloat(el.style.opacity); 
 
    if (!((val += .1) > 1)) { 
 
     el.style.opacity = val; 
 
     requestAnimationFrame(fade); 
 
    } 
 
    })(); 
 
} 
 
var cnt = 1; 
 
var $ = function(sel) { 
 
    return document.querySelectorAll(sel) 
 
} 
 
window.onload = function() { 
 
    [].forEach.call($(".button"), function(button) { 
 
    button.onclick = function() { 
 
     var id = this.getAttribute("data-id"); 
 
     var next = "q" + (parseInt(id.substring(1),10)+1); 
 
     console.log(id,next) 
 
     fadeOut($("#" + id)[0]); 
 
     if (next < "q4") { 
 
     fadeIn($("#" + next)[0]); 
 
     } else { 
 
     window.scrollTo(0, 0); 
 
     fadeOut($("#content1")[0]); 
 
     var tId1 = setTimeout(function() {   
 
      fadeIn($("#content2")[0]); 
 
      var tId2=setTimeout(function() { 
 
      fadeIn($("#result1")[0]); 
 
      },2000) 
 
     },1000); 
 
     } 
 
    } 
 
    }); 
 
}

#q2, 
 
#q3, 
 
#q4, 
 

 
#content2, 
 
#content3, 
 
.result { 
 
    display: none; 
 
} 
 
.bq1, 
 
.bq2, 
 
.bq3, 
 
.bq4 { 
 
    cursor: pointer; 
 
    padding: 3px; 
 
    margin: 3px; 
 
    background: grey; 
 
}

<div id="content1"> 
 
    <div id="q1"> 
 
    <p class="question"><strong>Question 1 of 4:</strong> How many years have you been with our service?</p> 
 
    <div class="button" data-id="q1">Less than 1 year</div> 
 
    <div class="button" data-id="q1">1-5 years</div> 
 
    <div class="button" data-id="q1">More than 5 years</div> 
 
    </div> 
 
    <div id="q2"> 
 
    <p class="question"><strong>Question 2 of 4:</strong> Have you ever used our online support?</p> 
 
    <div class="button" data-id="q2">Yes</div> 
 
    <div class="button" data-id="q2">No</div> 
 
    </div> 
 
    <div id="q3"> 
 
    <p class="question"><strong>Question 3 of 4:</strong> What is your primary use for our Service?</p> 
 
    <div class="button" data-id="q3">Work</div> 
 
    <div class="button" data-id="q3">Leisure</div> 
 
    <div class="button" data-id="q3">Others</div> 
 
    </div> 
 
    <div id="q4"> 
 
    <p class="question"><strong>Question 4 of 4:</strong>Would you recommend our service to your friends and family?</p> 
 
    <div class="button" data-id="q4">Yes</div> 
 
    <div class="button" data-id="q4">No</div> 
 
    <div class="button" data-id="q4">Maybe</div> 
 
    </div> 
 
</div> 
 
<div class="Mayn-content" id="content2"> 
 
    <h1 style="text-align:center;">Submitting Answers</h1> 
 
    <div class="loading"></div> 
 
    <p class="result" id="result1">Verifying Customer...</p> 
 
    <p class="result" id="result2">Checking Database...</p> 
 
    <p class="result" id="result3">Analyzing...</p> 
 
</div> 
 
<div class="Mayn-content" id="content3"> 
 
    <h1 style="text-align:center;">Thank you for your opinion!</h1> 
 
</div>