单击html中的同一颗星时，如何取消选择所有选定的评级星？

问题描述

我开发了一个用于星级评分的网页。如果用户在同一颗星星上单击两次，我需要取消选择星星，如何取消选择所有星级值？这意味着如果用户点击 3 颗星进行评分，然后再次点击第 3 颗星，如何消除所有评分星值？

这是我试过的

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="manifest" href="manifest.json">
</head>
<body>
    <h1>This is Home page</h1>
    <p>This is a testing page for rating.</p>
    <div>
        <img onClick="rate()" class="star" id="1" src="./img/star.png" />
        <img onClick="rate()" class="star" id="2" src="./img/star.png" />
        <img onClick="rate()" class="star" id="3" src="./img/star.png" />
        <img onClick="rate()" class="star" id="4" src="./img/star.png" />
        <img onClick="rate()" class="star" id="5" src="./img/star.png" />
    </div>
    <div>
        <img onClick="rate1()" class="star" id="6" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="7" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="8" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="9" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="10" src="./img/star.png" />
    </div> 
</body> 
</html>
<script>
    function rate() {
        const { id } = event.target;
        var i;
        for (i = 1; i <= 5; i++) {
            if (i <= parseInt(id)) {
                document.getElementById(i).setAttribute("src","./img/fillstar.png");
            } else {
                document.getElementById(i).setAttribute("src","./img/star.png");
            }
        }
    }

    function rate1() {
        const { id } = event.target;
        var i;
        for (i = 6; i <= 10; i++) {
            if (i <= parseInt(id)) {
                document.getElementById(i).setAttribute("src","./img/star.png");
            }
        }
    }
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript rating-system