Question

当我单击按钮更改类时，我试图理解代码的问题，但是再次单击更改后的按钮类，我没有尝试使用on（）函数，但是相同的事情却没有发生< / p>

这是我的示例代码：

$('#my-btn').click(function(){
  $(this).removeClass('btn-success');
  $(this).addClass('btn-danger');
  $(this).html('Close');
});

$('.btn-danger').click(function(){
    alert('hello world');
  $(this).removeClass('btn-danger');
  $(this).addClass('btn-success');
  $(this).html('Open');
});

还有我的测试用小提琴：https://jsfiddle.net/aqpdohL2/1/

Answer 1

尝试此代码。我检查了它对我有用。

<div class="section">
  <button class='btn btn-success' id='my-btn'> Open </button>
</div>

$(".section").on("click", "#my-btn", function() {
  $("#my-btn").removeClass('btn-success');
  $(this).addClass('btn-danger');
  $(this).html('Close');
});

$(".section").on("click", ".btn-danger", function() {
  $(this).removeClass('btn-danger');
  $(this).addClass('btn-success');
  $(this).html('Open');
});

Answer 2

因为当您的代码运行时，此选择器不匹配任何内容：

$('.btn-danger')

因此，第二个单击处理程序永远不会绑定到任何东西，也不会被调用，第一个单击处理程序始终会被调用。

这里不需要两个点击处理程序。每次单击元素时，都会调用您的第一次单击处理程序，因此您只需将逻辑放入该处理程序中即可。例如：

$('#my-btn').click(function(){
  $(this).toggleClass('btn-success');
  $(this).toggleClass('btn-danger');
  if ($(this).html() === 'Open') {
    $(this).html('Close');
  } else {
    $(this).html('Open');
  }
});

Fiddle

通常，最好不要在同一个元素上附加许多单击处理程序，因为这将更难以管理代码的行为。相反，宁愿使用更少的点击处理程序来定义逻辑并管理该逻辑。

Answer 3

@David的解决方案可以进一步缩短：

$('#my-btn').click(function(){ $(this)
    .toggleClass('btn-danger btn-success')
    .html($(this).html()==='Open'?'Close':'Open');
});

jQuery方法.toggleClass()可以同时应用于多个类名。

$('#my-btn').click(function(){ $(this)
    .toggleClass('btn-danger btn-success')
    .html($(this).html()==='Open'?'Close':'Open');
});

.big {font-size:24pt}
.btn-success {background-color:green}
.btn-danger {background-color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="my-btn" class="big btn-success">Open</button>

按钮更改类上的单击事件问题

3 个答案: