如何使用JQuery ReplaceWith与material.io图标一起使用

问题描述 投票:0回答:1

想让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>
javascript html jquery onclick
1个回答
0
投票

把你的功能改成。

    function favOnclick(x) {
        if (x.innerHTML === "favorite_border") {
            x.innerHTML = "favorite";
        } else {
            x.innerHTML = "favorite_border";
        }
    }
© www.soinside.com 2019 - 2024. All rights reserved.