如何使用javascript和切换类循环浏览图标?

j91ykkif  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(303)

此问题已在此处找到答案

queryselector和queryselectorall与javascript中的getelementsbyclassname和getelementbyid(11个答案)
22小时前关门。
我只是试着用javascript循环图标和切换类,但有些东西不起作用,所以让我知道它有什么问题。

const stars = document.getElementsByClassName('stars');

stars.addEventListener('click', checked);

function checked() {
    for (let i = 0; i < stars.length; i++) {
        stars.classList.toggle("far");
        stars.classList.toggle("fas");
    }
}
<div class="star-ratings">
                <input type="radio" name="star-one" >
                <label for="star-one"><i class="far fa-star" class="stars" aria-hidden="true" ></i></label>
                <input type="radio" name="star-two" >
                <label for="star-two"><i class="far fa-star " class="stars" aria-hidden="true"></i></label>
                <input type="radio" name="star-three" id="star-three">
                <label for="star-three"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
                <input type="radio" name="star-four" id="star-four">
                <label for="star-four"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
                <input type="radio" name="star-five" id="star-five">
                <label for="star-five"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
              </div>
64jmpszr

64jmpszr1#

现在还不太清楚你想在这里实现什么。但是,如果您所要做的只是在更改选项时不改变其他选项,那么您就不需要使用javascript。
简单的解决方案是为要组合在一起的所有单选按钮设置一个名称属性,该属性具有通用名称。

<html lang="en">

<body>
    <div class="star-ratings">
        <input type="radio" name="star-one">
        <label for="star-one"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
        <input type="radio" name="star-one">
        <label for="star-two"><i class="far fa-star " class="stars" aria-hidden="true"></i></label>
        <input type="radio" name="star-one" id="star-three">
        <label for="star-three"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
        <input type="radio" name="star-one" id="star-four">
        <label for="star-four"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
        <input type="radio" name="star-one" id="star-five">
        <label for="star-five"><i class="far fa-star" class="stars" aria-hidden="true"></i></label>
    </div>
</body>

</html>

相关问题