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

您可以使用一些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 2

如何使用disabled属性，这将禁用该按钮并阻止用户单击同一按钮两次。

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

Answer 3

这是一种简单的方法，只需隐藏form类onclick并显示data属性中提到的类即可：

说明：

• $('.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>