我想在单击时更改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>
如何解决标题每次更改的问题?任何帮助表示赞赏。