点击函数更改字体awesome图标

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


  }

- Laura Chirila

---

change 的 innerHTML 包含了 <i> 标签的标记。它不会匹配你正在检查的字符串。你应该检查嵌套的 <i> 标签是否有 fa-eye 类，而不是根据 innerHTML 进行评估。另外，以后如果 if 语句没有按照你的预期工作，请尝试使用 console.log 输出值并查看发生了什么。 - Taplar

Answer 1

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

Answer 2

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

Answer 3

因为您已经插入了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');
});

如果你想要移除fa-eye类，那么你可以使用链式调用toggleClass或者再次添加它。

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

或者将其单行添加。如果这不能帮助，请注释掉。

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

- Rajesh Paudel

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");，但由于你还想更改文本，我建议使用上面的解决方案。

- Dan Kreiger

Answer 5

function myFunction(x) {
  x.classList.toggle("fa-thumbs-down");
}

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: darkblue;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike):</p>
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>

- Waseem Usman