jquery點擊添加類和切換div

Question

當我點擊兩次活動類切換保持繼續有沒有辦法停止點擊兩次或有沒有更好的方法？

$(document).on('click', '#btnsbs .btn', function(e) { 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 
    $(".form").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="btnsbs"> 
 
    <button class="btn btn-buy active">Buy</button> 
 
    <button class="btn btn-sell">Sell</button> 
 
</div> 
 

 
<div class="form" style="display:block;"> 
 
    form buy 
 
</div> 
 
<div class="form" style="display:none;"> 
 
    form sell 
 
</div>

Answer 1

這裏有一個簡單的方法來做到這一點，只是藏form類的onclick，並在數據屬性顯示課堂上提到：

說明：

• $('.form').hide();將隱藏所有表格form
• $('.' + $(this).attr('data')).show();將顯示帶班的形式，你在你的按鈕data屬性提到
• $(this).attr('disabled',true).siblings().attr('disabled',false); - 防止兩次

實例點擊：

$('#btnsbs .btn').on('click', function(e) { 
 

 
     $('.form').hide(); 
 

 
     $('.' + $(this).attr('data')).show(); 
 

 
     $(this).attr('disabled',true).siblings().attr('disabled',false); 
 

 
     console.log($(this).attr('data')); 
 
});

.form {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="btnsbs"> 
 
    <button class="btn" data="form-buy" >Buy</button> 
 
    <button class="btn" data="form-sell" >Sell</button> 
 
</div> 
 

 
<div class="form form-buy" > 
 
    form buy 
 
</div> 
 
<div class="form form-sell" > 
 
    form sell 
 
</div>

Answer 2

你可以使用一些if-else語句是這樣的：

$(document).on('click', '#btnsbs .btn', function(e) { 
 
    var $this = $(this); 
 
    //Just check the button being clicked for the class you cara about using hasClass 
 
    if ($this.hasClass('btn-buy')){ 
 
    //Then set the text of your form element 
 
    $(".form").text("Form Buy"); 
 
    console.log("SELL"); 
 
    } 
 
    else if ($this.hasClass('btn-sell')){ 
 
    $(".form").text("Form Sell"); 
 
    console.log("BUY"); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="btnsbs"> 
 
    <button class="btn btn-buy">Buy</button> 
 
    <button class="btn btn-sell">Sell</button> 
 
</div> 
 

 
<div class="form" style="display:block;"> 
 
    
 
</div>

Answer 3

如何做利用disabled屬性，這將禁用按鈕並阻止用戶點擊相同的bu頓頓兩次。

$(document).ready(function(){ 
 

 
    $(document).on('click', '#btnsbs .btn.active', function(e) { 
 
     $(this).addClass('active').siblings().removeClass('active');//remove default active class 
 
     $(".form").toggle(); 
 
    }); 
 

 
    $(document).on('click', '#btnsbs .btn', function(e) { 
 
     $('.btn.active').removeAttr('disabled');//reset all disabled buttons 
 
     $(this).addClass('active').siblings().removeClass('active'); 
 
     $(this).attr('disabled','disabled');//disable button upon click 
 
     $(".form").toggle(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="btnsbs"> 
 
    <button class="btn btn-buy active" disabled>Buy</button> 
 
    <button class="btn btn-sell">Sell</button> 
 
</div> 
 

 
<div class="form" style="display:block;"> 
 
    form buy 
 
</div> 
 
<div class="form" style="display:none;"> 
 
    form sell 
 
</div>