悬停时在 Font-Awesome 图标之间切换

Question

我试图了解不同的解决方案，但它们似乎都不适用于我的项目。我得到的最远的是这个；function onBackButtonHover() {    const backButton = document.getElementById("page-controls").querySelector(".fas");    $(backButton).removeClass();    $(backButton).addClass("fas fa-arrow-left");    $(backButton).mouseout(function(){        console.log("Hello.");    });}page-controls .navbar-brand {    background-color: #54aaff;    position: absolute;    left: 0;    top: 0;    bottom: 0;    width: 56px;    padding: 0;    margin: 0;    text-align: center;    color: #fff;    transition: transform .25s ease-in-out;}#page-controls .navbar-brand:focus, #page-controls .navbar-brand:hover {    color: #fff;    transform: scale(.85);}#page-controls .navbar-brand .fas {    font-size: 32px;    margin: 12px auto;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="//dfzlwjdb9r0y9.cloudfront.net/fa/css/all.css" rel="stylesheet"><a id="backButton intranet" class="navbar-brand" href="/dashboard" onmouseover="onBackButtonHover()">    <i class="fas fa-user-lock"></i></a>但是这里的问题是我不知道如何在不使用静态类的情况下将图标恢复正常，一旦它被更改。我想避免使用静态类，因为相同的脚本会在具有不同图标的页面上运行，因此类会因页面而异。另一个问题似乎是脚本在一次鼠标悬停期间运行了多次，如图console.log所示。我的目标是简单地将当前图标更改fa-arrow-left为悬停链接时的图标，并在完成后将其切换回原始图标。该解决方案还应该涵盖移动用户，因此它也必须注册一个触摸输入——我应该如何处理这个问题？

Answer 1

如果我没猜错，那很简单

$('document').ready(function() {

  

  $('#backButton').on( "mouseover", function() {

    $('#backButton > i').removeClass('fa-user-lock').addClass('fa-arrow-left');

  });

  

  $('#backButton').on( "mouseout", function() {

    $('#backButton > i').removeClass('fa-arrow-left').addClass('fa-user-lock');

  });

  

});

<script   src="https://code.jquery.com/jquery-3.5.1.min.js"   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="   crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<a id="backButton" class="navbar-brand" href="/dashboard">

    <i class="fas fa-user-lock"></i>

</a>

现在你的问题的第二部分 - 如何不硬编码类名？好吧，显然你需要做这样的事情——读取活动元素的类，记住它并在 mouseout 上使用……这样的事情……（我将backButtonID 更改为类以显示多个图标示例）

$('document').ready(function() {

  // Remember active class

  let tmpClass;

  

  // On mouse over

  $('.backButton').on( "mouseover", function() {

    // get current class

    tmpClass = $(this).children('i').attr('class').split(/\s+/);

    // Swap

    $(this).children('i').removeClass(tmpClass[1]).addClass('fa-arrow-left');

  });

  

  // On mouse out

  $('.backButton').on( "mouseout", function() {

    $(this).children('i').removeClass('fa-arrow-left').addClass(tmpClass[1]);

  });

  

});

<script   src="https://code.jquery.com/jquery-3.5.1.min.js"   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="   crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<a class="navbar-brand backButton" href="/dashboard">

    <i class="fas fa-user-lock"></i>

</a>

<a class="navbar-brand backButton" href="/dashboard">

    <i class="fas fa-bomb"></i>

</a>

<a class="navbar-brand backButton" href="/dashboard">

    <i class="fas fa-bell-slash"></i>

</a>

Answer 2

你可以试试这个，这样你就可以为具有相同功能的不同组件调用相同的函数。

function onBackButtonHover(e) {

    var i = $(e).find('i.fas')

  $(i).removeClass($(i).attr("default")).addClass($(i).attr("hover"))

}

function onBackButtonOut(e) {

    var i = $(e).find('i.fas')

  $(i).removeClass($(i).attr("hover")).addClass($(i).attr("default"))

}

<script   src="https://code.jquery.com/jquery-3.5.1.min.js"   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="   crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<a id="backButton intranet" class="navbar-brand" href="/dashboard" onmouseover="onBackButtonHover(this)" onmouseout="onBackButtonOut(this)">

    <i class="fas fa-user-lock" default="fa-user-lock" hover="fa-arrow-left"></i>

</a>