时间戳

首页 > 解决方案 > 使用 jquery 更改 fa-icon 的标题

javascript - 使用 jquery 更改 fa-icon 的标题

问题描述

我想title在单击时更改 fontawesome 图标的属性。因此，在对其进行测试时，它似乎工作正常，因为每次都会切换类，但标题更改仅适用于第一次单击。

$(document).ready(function(){
    $(".fa-bookmark").click(
    	function(){
        $(this).attr('title', "Add to bookmark")
        $(this).toggleClass("fa-bookmark fa-bookmark-o");
      }
    );

    $(".fa-bookmark-o").click(
      function(){
        $(this).attr('title', "Remove from bookmark");
        $(this).toggleClass("fa-bookmark-o fa-bookmark");
      }
    );
});
.fa{
    cursor: pointer;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.fa:hover{
	color: blue;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<i class="fa fa-bookmark" title="Remove from bookmark"></i>
</body>
</html>

如何解决标题每次都更改的问题？任何帮助表示赞赏。

标签： javascriptjqueryhtmlcss

解决方案

推荐阅读