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语句：

＆＃13;

$(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");
  };
});

＆＃13;

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

＆＃13;

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，并显示数据属性中提到的类：

<强>解释

$('.form').hide();会隐藏课程form
$('.' + $(this).attr('data') ).show();将在您的按钮的data属性中提及您的课程表格
$(this).attr('disabled',true).siblings().attr('disabled',false); - 阻止点击两次

示例：

＆＃13;

$('#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') );
});

＆＃13;

.form {display:none;}

＆＃13;

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

＆＃13;

jquery单击添加类并切换div

3 个答案: