此问题已在此处找到答案:
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>
1条答案
按热度按时间64jmpszr1#
现在还不太清楚你想在这里实现什么。但是,如果您所要做的只是在更改选项时不改变其他选项,那么您就不需要使用javascript。
简单的解决方案是为要组合在一起的所有单选按钮设置一个名称属性,该属性具有通用名称。