フォントの素晴らしいアイコンのonclick機能を変更する

ユーザーがボタンをクリックしたときに、.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>

Javascriptコード：

 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');
            }


  }

javascriptjqueryhtmlfont-awesomeshow-hide

2017/08/03Laura Chirila

HTMLとJQueryを単純化することで、希望する結果を得ることができると思います。

このスニペットを試してください：

_$(document).ready(() => {
  const button = $(".btn");

  button.click(() => {
    if (button.text() == " Show") {
      button.html('<i class="fa fa-eye-slash"></i> Hide');
    } else {
      button.html('<i class="fa fa-eye"></i> Show');
    }
  });
});_

_<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/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 class='btn btn-default'><i class="fa fa-eye"></i> Show</button>_

$('i').toggleClass("fa-eye-slash fa-eye");のようにクラスを切り替えることができますが、テキストも変更したいので、上記の解決策をお勧めします。

2017/08/03Dan Kreiger