使用jQuery更改fa-icon的标题

时间:2018-07-01 21:29:17

标签: javascript jquery html css

我想在单击时更改fontawesome图标的title属性。因此,在进行测试时,似乎效果很好,因为每次都可以切换类,但标题更改仅适用于第一次单击。

$(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>

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

0 个答案:

没有答案