如何使用带有materials.io图标的JQuery ReplaceWith



希望在单击时将favorite_border图标切换到收藏夹图标。

由于我们使用material.io,并且类对于两个图标都是material图标,所以不确定如何使用jquery。我该怎么办?(所以我们可以继续使用这些图标(

谢谢

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<ul class="leftSidebarList mdl-list">
<li class="mdl-list__item mdl-list__item--three-line">
<span class="mdl-list__item-secondary-content">
<a class="likeUnlike" href="#">
<i onclick="favOnclick(this)" id="likeUnpressed" class="material-icons">favorite_border</i>
<i onclick="favOnclick(this)" id="likePressed" style="visibility:hidden" class="material-icons">favorite</i>
</a>
</span>
</li>
</ul>
<script>
function favOnclick(x) {
if (document.getElementById(x) === "favorite_border") {
x.replaceWith("favorite")
} else {
x.replaceWith("favorite_border")
}
}
</script>
</body>

将函数更改为:

function favOnclick(x) {
if (x.innerHTML === "favorite_border") {
x.innerHTML = "favorite";
} else {
x.innerHTML = "favorite_border";
}
}

最新更新