更改字体真棒图标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> 

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


    } 

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>

Answer 2

既然你已经插入Jquery的。你可以很容易地通过Jquery来做到这一点。

<button 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> 

现在为这个jQuery代码是

$("#show_hide_bt").click(function(event) { 
    $(this).find('i').toggleClass('fa-eye-slash'); 
}); 

如果你想删除的发眼类，那么您可以链接其他toggleClass或添加此再次

$(this).find('i').toggleClass('fa-eye'); 

或者添加此在单行中。注释如果这个亘古不变的帮助

$(this).find('i').toggleClass('fa-eye-slash').toggleClass('fa-eye'); 

Answer 3

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>

Answer 4

我想你可以通过简化你的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");，但因为你要更改的文字也一样，我会建议上面的方案。