jQuery按钮改变不工作

jQuery Button changes not working

本文关键字：工作 改变 按钮 jQuery      更新时间：2023-09-26

我试图给按钮一个新的内容，如果它被点击。我还添加了新的类。这工作是完全好的第一次点击，但由于某种原因，innerhtml在点击第二次后没有改变。HTML: 

<button class="btn btn-warning btn-invisible"><i class="fa fa-eye-slash"></i></button>
jQuery: 

$('.btn-invisible').click(function() {
  $(this).removeClass('btn-invisible');
  $(this).addClass('btn-visible');
  $(this).html('<i class="fa fa-eye"></i>');
});            
$('.btn-visible').click(function() {
  $(this).removeClass('btn-visible');
  $(this).addClass('btn-invisible');
  $(this).html('<i class="fa fa-eye-slash"></i>');
});

我把小提琴准备好了:https://jsfiddle.net/dthee9w6/7/

如果有人能帮助我，我会很高兴。

您应该使用'on'而不是'click'，以便您可以使用动态添加的元素。

$('body').on('click','.btn-invisible',function() {
  $(this).removeClass('btn-invisible');
  $(this).addClass('btn-visible');
  $(this).html('<i class="fa fa-eye"></i>');
});            
$('body').on('click','.btn-visible',function() {

  $(this).removeClass('btn-visible');
  $(this).addClass('btn-invisible');
  $(this).html('<i class="fa fa-eye-slash"></i>');
});

希望能有所帮助。

将代码包装在$(function(){})中，即$(document).ready(function(){});，除此之外一切都很好

没有必要在每次点击时更新html，所有你需要做的就是添加和删除必要的类。

对于第一次点击，你正在删除不可见的类，如果下一次点击，它试图再次删除不可见的类，它会抛出一个错误，你应该使用toggleClass

  $(function() {
  $('.btn-invisible').click(function() {
    $(this).toggleClass('btn-invisible');
    if (!$(this).hasClass('btn-visible')) {
      $(this).addClass('btn-visible');
      $(this).find('.fa').removeClass('fa-eye-slash').addClass('fa-eye');
    }
  });
  $('.btn-visible').click(function() {
    $(this).toggleClass('btn-visible');
    if (!$(this).hasClass('btn-invisible')) {
      $(this).addClass('btn-invisible');
      $(this).find('.fa').removeClass('fa-eye').addClass('fa-eye-slash');
    }
  });
});

希望有所帮助

相关文章：