想让favorite_border图标在点击时切换到favorite图标。
因为我们使用的是 material.io,而这两个图标的类是 material-icons,不知道如何使用 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";
}
}