Question

我有以下代码，该代码允许用户选择一个评级值，并且该代码没有问题。在第一个选择中，所有星星均为灰色。

但是，如果用户去对第二件事进行评分，它不会保留该值，但会保留以前的黄色星星数量。

如何重置它，以免星星变成黄色-我正在寻找一种Javascript解决方案。

var rating = {}

function rate(value) {
  rating.starValue = Number(value);
}

.stars,
.stars label::before
{
    display: inline-block;
}

.stars label:hover,
.stars label:hover ~ label
{
    color: #b5cebe;
}

.stars input
{
    display: none;
}

.stars
{
    direction: rtl;
}

.stars label
{
    color: #ccc;
}

.stars label::before
{
    content: "\2605";
    width: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 50px;
    padding: 25px;
    cursor: pointer;
}

.stars input:checked ~ label
{
    color: #f5b301;
}

<div class="stars">
            <input type="radio" name="stars-1" id="stars-1-0" value="5" onclick="rate(this.value)"/><label for="stars-1-0"></label><!--
          --><input type="radio" name="stars-1" id="stars-1-1" value="4" onclick="rate(this.value)"/><label for="stars-1-1"></label><!--
          --><input type="radio" name="stars-1" id="stars-1-2" value="3" onclick="rate(this.value)"/><label for="stars-1-2"></label><!--
          --><input type="radio" name="stars-1" id="stars-1-3" value="2" onclick="rate(this.value)"/><label for="stars-1-3"></label><!--
          --><input type="radio" name="stars-1" id="stars-1-4"  value="1" onclick="rate(this.value)"/><label for="stars-1-4"></label>
        </div>

编辑：在人们对此投反对票之前（大概是因为他们认为我没有试图自己解决这个问题），我一直在努力解决一个多小时，我遇到的主要问题是我可以无法确定要使用哪个DOM选择器。由于我已经花了一个多小时来进行研究，所以我没有简洁的方法来放置我尝试过的所有组合

Answer 1

您需要弄清楚如何重设单选按钮集，即您可能有一个重设按钮，或者可以在选定状态和未选定状态之间切换。以下是假设发生重置操作的事件，仅重置单选按钮的代码。

var ratings = document.getElementsByName('stars-1');
ratings.forEach(function(element)
{
  element.checked=false
})

Answer 2

你去了：）

querySelectorAll Link

var rating = {}

function rate(value) {
  rating.starValue = Number(value);
}

function reset() {
  var elements = document.querySelectorAll('.stars input[name=stars-1]');
  elements.forEach(function(element) {
    element.checked = false;
  });

  rating = {}
}

.stars,
.stars label::before
{
    display: inline-block;
}

.stars label:hover,
.stars label:hover ~ label
{
    color: #b5cebe;
}

.stars input
{
    display: none;
}

.stars
{
    direction: rtl;
}

.stars label
{
    color: #ccc;
}

.stars label::before
{
    content: "\2605";
    width: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 50px;
    padding: 25px;
    cursor: pointer;
}

.stars input:checked ~ label
{
    color: #f5b301;
}

<div class="stars">
            <input type="radio" name="stars-1" id="stars-1-0" value="5" onclick="rate(this.value)"/><label for="stars-1-0"></label><!--
          --><input type="radio" name="stars-1" id="stars-1-1" value="4" onclick="rate(this.value)"/><label for="stars-1-1"></label><!--
          --><input type="radio" name="stars-1" id="stars-1-2" value="3" onclick="rate(this.value)"/><label for="stars-1-2"></label><!--
          --><input type="radio" name="stars-1" id="stars-1-3" value="2" onclick="rate(this.value)"/><label for="stars-1-3"></label><!--
          --><input type="radio" name="stars-1" id="stars-1-4"  value="1" onclick="rate(this.value)"/><label for="stars-1-4"></label>
        </div>
        
        <input type='button' onclick='reset()' value='reset'>

从Javascript重置CSS星级

2 个答案: