选择单击的按钮进行课堂动画处理

Question

I have 4 buttons on my page with a classname of .loadingButton to animate it with a spinning circle once clicked but somehow the first button is the only one which animates when clicked. Am I missing something? I only included two buttons in the snippet

 $(function(){ var loadBtn = document.querySelector('.loadingButton'); var redir= function() { loadBtn.innerHTML = "Go Mobile"; loadBtn.classList.add('spinning'); setTimeout( function (){ loadBtn.classList.remove('spinning'); loadBtn.innerHTML = "Go Mobile"; }, 12000); } loadBtn.addEventListener("click", redir, false); }); 

 /*button loading*/ .loadingButton { display: inline-block; outline: none; position: relative; -webkit-transition: padding-right 0.3s ease; transition: padding-right 0.3s ease; } .loadingButton.spinning { padding-right: 40px !important; } .loadingButton.spinning:after { content: ''; font-size:14px !important; right: 6px; top: 50%; width: 0; height: 0; box-shadow: 0px 0px 0 1px #fff; position: absolute; border-radius: 50%; -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease; animation: rotate360 .5s infinite linear, exist .1s forwards ease; } .loadingButton.spinning:before { content: ""; width: 0px; height: 0px; border-radius: 50%; right: 6px; top: 50%; position: absolute; border: 2px solid #fff; border-right: 3px solid #fff; -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease ; animation: rotate360 .5s infinite linear, exist .1s forwards ease ; } @-webkit-keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes exist { 100% { width: 15px; height: 15px; margin: -8px 5px 0 0; } } @keyframes exist { 100% { width: 15px; height: 15px; margin: -8px 5px 0 0; } } .mybutton { background-color: #F89011; padding: 9px; font-size: 20px !important; color: white !important; width: 147.578px; height: 43px; position: relative; right: -98px !important; float: right !important; } input.radius,input.maps,input.diy,input.ctc { height: 43px; width: 410px !important; background-color:#EFEFEF !important; text-indent: 10px !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="radius" id="presale-url" placeholder="Enter URL" type="url" name="site_url" required=""> <button type="button" id="presale-button" class="1921549220 loadingButton mybutton"> Go&nbsp;Mobile </button> <input class="radius" id="presale-url-dt" placeholder="Enter URL" type="url" name="site_url" required="" style="background-color:white !important;"> <button type="button" id="presale-button-dt" class=" loadingButton mybutton"> Go&nbsp;Mobile </button> 

Answer 1

I think we can simplify your JavaScript a bit. Something like this:

 $(".loadingButton").click(function(){ $(this).addClass("spinning") setTimeout(function(){ $(".loadingButton").removeClass("spinning") }, 12000); }); 

 /*button loading*/ .loadingButton { display: inline-block; outline: none; position: relative; -webkit-transition: padding-right 0.3s ease; transition: padding-right 0.3s ease; } .loadingButton.spinning { padding-right: 40px !important; } .loadingButton.spinning:after { content: ''; font-size:14px !important; right: 6px; top: 50%; width: 0; height: 0; box-shadow: 0px 0px 0 1px #fff; position: absolute; border-radius: 50%; -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease; animation: rotate360 .5s infinite linear, exist .1s forwards ease; } .loadingButton.spinning:before { content: ""; width: 0px; height: 0px; border-radius: 50%; right: 6px; top: 50%; position: absolute; border: 2px solid #fff; border-right: 3px solid #fff; -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease ; animation: rotate360 .5s infinite linear, exist .1s forwards ease ; } @-webkit-keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes exist { 100% { width: 15px; height: 15px; margin: -8px 5px 0 0; } } @keyframes exist { 100% { width: 15px; height: 15px; margin: -8px 5px 0 0; } } .mybutton { background-color: #F89011; padding: 9px; font-size: 20px !important; color: white !important; width: 147.578px; height: 43px; position: relative; float: right !important; } input.radius,input.maps,input.diy,input.ctc { height: 43px; width: 410px !important; background-color:#EFEFEF !important; text-indent: 10px !important; } 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <input class="radius" id="presale-url" placeholder="Enter URL" type="url" name="site_url" required=""> <button type="button" id="presale-button" class="1921549220 loadingButton mybutton"> Go&nbsp;Mobile </button> <input class="radius" id="presale-url-dt" placeholder="Enter URL" type="url" name="site_url" required="" style="background-color:white !important;"> <button type="button" id="presale-button-dt" class="loadingButton mybutton"> Go&nbsp;Mobile </button>