更改字体很棒的图标onclick功能

Question

当用户单击按钮时，我试图将 .fa-eye 交换为 fa-eye-slash。我究竟做错了什么？它不工作。

HTML 代码：

 <button onclick="arata_ascunde(this);" style="align:right;font-size:13px"
class="btn btn-info " id="show_hide_bt" style="background-color:#00b0ff;"><i
class="fa fa-eye"></i> Show</button>

脚本代码：

  function arata_ascunde(button) {
     var x = document.getElementById('showhide');
     var change = document.getElementById("show_hide_bt");

     if (x.style.display === 'none') {
       x.style.display = 'block';
     } else {
       x.style.display = 'none';
     }

     if (change.innerHTML == ' Show')
            {

                change.innerHTML = ' Hide';
                $(button).find('i').toggleClass('fa-eye').toggleClass('fa-eye-slash');
            }
            else {

                change.innerHTML = ' Show';
                $(button).find('i').toggleClass('fa-eye-slash').toggleClass('fa-eye');
            }

  }

原文由 Laura Chirila 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

 function arata_ascunde(button) {
   var x = $('#showhide');
   $(button).find('i').remove();
   if ($(button).text().trim() == 'Show') {
     $(button).html($('<i/>',{class:'fa fa-eye-slash'})).append(' Hide');
     x.fadeIn();
    }
    else {
      $(button).html($('<i/>',{class:'fa fa-eye'})).append(' Show');
      x.fadeOut();
    }
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button onclick="arata_ascunde(this);" style="align:right;font-size:13px"
            class="btn btn-info " id="show_hide_bt" style="background-color:#00b0ff;">
        <i class="fa fa-eye"></i> Show
    </button>
    <div id="showhide" style="background-color:red;width:100px;height:100px;margin:10px;display:none;"></div>

原文由 Farhad Bagherlo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

 document.querySelector('button').addEventListener('click', function() {
  const icon = this.querySelector('i');
  const text = this.querySelector('span');

  if (icon.classList.contains('fa-eye')) {
    icon.classList.remove('fa-eye');
    icon.classList.add('fa-eye-slash');
    text.innerHTML = 'Hide';
  } else {
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
    text.innerHTML = 'Show';
  }
});

 <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<button><i class="fa fa-eye"></i> <span>Show</span></button>

原文由 Will 发布，翻译遵循 CC BY-SA 3.0 许可协议