クラスでアニメートするクリックされたボタンの選択

Question

私はページに4つのボタンを持っています。クラス名は.loadingButtonです。クリックすると回転する円でアニメートされますが、クリックするとアニメーションするボタンは何とかなります。何か不足していますか？ 私は唯一の私たちはあなたのJavaScriptのビットを簡素化することができると思いスニペットに2つのボタン

$(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

が含まれています。

$(".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>