Question

我有一个系统，您首先选择一个日期，然后单击主页按钮并调用一个具有表单的模态。单击按钮而不选择日期时，它会变为红色并且不执行任何操作。当您选择日期并单击按钮时，它会添加模态的参数，然后再次单击以打开表单。但是，表单打开N次，锁定整个系统。任何人都可以帮助我吗？

HTML：

<div id="cidade-1256" class="col-sm-4 box-curso">
  <div class="plan wow fadeInLeft animated animated" data-wow-offset="120" data-wow-duration="1.5s" style="visibility: visible; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft;">
    <div class="title">Brasília</div>
      <div class="description">
        <ul><li><button type="button" class="btn btn-curso">AGO | 15 - 16</button></li></ul>
      </div>
      <a id="1256" class="btn btn-primary">ORDER NOW</a>
    </div>
  </div>
</div>

JS：

$(document).on('click', 'a[id]', function(e){
    var id_form = $(this).attr('id').replace('#', '');
    var id_order = '#' + $(this).attr('id');
    if($('#cidade-' + id_form).find('button').hasClass('active')){
       $(id_order).removeClass('btn-curso-error');
       $(id_order).attr('data-toggle', 'modal');
       $(id_order).attr('data-target', '#modal-form');
       $(this).trigger('click');
    }else{
       $(id_order).addClass('btn-curso-error');
    }
});

Answer 1

我相信您需要从按钮中删除.active类，否则会导致您看到的无限循环。

请参阅下面的代码段，我认为这就是您要实现的目标。虽然，我可能不会再使用相同的链接进行链接。

注意：我必须将#1256切换为代码段中的button，您可以将其保留为a代码。

$("#1256").on('click', function(e) {
    var id_form = $(this).attr('id').replace('#', '');
    var $button = $('#cidade-' + id_form).find("button");
  
    if($button.hasClass('active')){
       $button.removeClass('active');
       $(this).removeClass('btn-curso-error')
              .attr('data-toggle', 'modal')
              .attr('data-target', '#modal-form')
              .trigger('click');
    } else {
       console.log("error");
       $(this).addClass('btn-curso-error');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="cidade-1256" class="col-sm-4 box-curso">
  <div class="plan">
    <div class="title">Brasília</div>
      <div class="description">
        <ul><li><button type="button" class="btn btn-curso active">AGO | 15 - 16</button></li></ul>
      </div>
      <button id="1256" class="btn btn-primary">ORDER NOW</button>
    </div>
  </div>
</div>

触发（'点击'）多次激活

1 个答案: