Question

如果类别相同或不同，则输入IF。

我尝试使用控制台日志检查上面的代码，它正确显示了true或false。

编辑： 我注意到，在切换其他按钮后，此问题并没有在第一次页面加载时出现。添加了代码。（如果相关，我正在使用Yii2框架，但我认为没有。）

if (!$('#7D').hasClass('active') && !$('#1M').hasClass('active') && !$('#1Y').hasClass('active')) {
  $('#1M').addClass('active');
}

if (!$('#7D').hasClass('active')) {
  $('#7D').off('click').click(function() {
    $('.btn').removeClass('active');
    $('#7D').addClass('active');
  });
}

if (!$('#1M').hasClass('active')) {
  $('#1M').off('click').click(function() {
    $('.btn').removeClass('active');
    $('#1M').addClass('active');
  });
}

if (!$('#1Y').hasClass('active')) {
  $('#1Y').off('click').click(function() {
    $('.btn').removeClass('active');
    $('#1Y').addClass('active');
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="panel panel-default">
  <div class="panel-body">
    <div id="button1" class="pull-left">
      <div id="w1" class="btn-group">
        <button id="7D" class="btn">7D</button>
        <button id="1M" class="btn">1M</button>
        <button id="1Y" class="btn">1Y</button>
      </div>
    </div>
  </div>
</div>

Answer 1

希望这就是您要寻找的东西：

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

   if($(this).hasClass('active')) return;

   $('.btn').removeClass('active');

   $(this).addClass('active');

});

Fiddle

和screencast表明它可以正常工作：

Answer 2

问题是您的if语句不在您的click事件之外。仅在最初运行代码时检查if。将click事件附加到元素后，无论其周围的代码如何，它都将在单击按钮时执行。

如果只想在未激活的情况下执行点击，则需要将if事件内的click移动。

if (!$('#7D').hasClass('active') && !$('#1M').hasClass('active') && !$('#1Y').hasClass('active')) {
  $('#1M').addClass('active');
}

$('#7D').off('click').click(function() {
  if (!$('#7D').hasClass('active')) {
    $('.btn').removeClass('active');
    $('#7D').addClass('active');
    console.log('added active class to #7D');
  }
});

$('#1M').off('click').click(function() {
  if (!$('#1M').hasClass('active')) {
    $('.btn').removeClass('active');
    $('#1M').addClass('active');
    console.log('added active class to #7M');
  }
});

$('#1Y').off('click').click(function() {
  if (!$('#1Y').hasClass('active')) {
    $('.btn').removeClass('active');
    $('#1Y').addClass('active');
    console.log('added active class to #7Y');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="panel panel-default">
  <div class="panel-body">
    <div id="button1" class="pull-left">
      <div id="w1" class="btn-group">
        <button id="7D" class="btn">7D</button>
        <button id="1M" class="btn">1M</button>
        <button id="1Y" class="btn">1Y</button>
      </div>
    </div>
  </div>
</div>

但是也可以使用jQuery的.on()函数动态附加click事件。这样，您无需为按钮重复相同的代码，它允许您动态使用类别为active的排除按钮。

if (!$('#7D').hasClass('active') && !$('#1M').hasClass('active') && !$('#1Y').hasClass('active')) {
  $('#1M').addClass('active');
}

$('#w1').off('click').on('click', '.btn:not(.active)', function() {
  $('.btn').removeClass('active');
  $(this).addClass('active');
  console.log('added active class to #' + this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <div id="button1" class="pull-left">
      <div id="w1" class="btn-group">
        <button id="7D" class="btn">7D</button>
        <button id="1M" class="btn">1M</button>
        <button id="1Y" class="btn">1Y</button>
      </div>
    </div>
  </div>
</div>

jQuery if语句为false或true时执行的语句

2 个答案: