javascript - 触发 ('click' ) 多次激活

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>