Question

我在 HTML 和 CSS 中获得了星级评定，并且它正在运行。但是，这颗恒星从右向左向后工作。我希望它从左到右正常工作。请给我建议一个方法。提前致谢。

HTML 代码：

<th style="vertical-align:middle">Your Rating</th>

<td>
    <input class="star star-5" id="star-5" type="radio" name="rating" value="5" 
    onclick="myFunction(this.value)"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="rating" value="4" 
    onclick="myFunction(this.value)"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="rating" value="3" 
    onclick="myFunction(this.value)"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="rating" value="2" 
    onclick="myFunction(this.value)"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="rating" value="1" 
    onclick="myFunction(this.value)"/>
    <label class="star star-1" for="star-1"></label>
 <input class="form-control" type="hidden" id="starRate" name="starRate" value="" readonly>
</td>
</tr>

CSS

div.stars {
  width: 270px;
  display: inline-block;

}

input.star { display: none; }

label.star {
float: center;
padding: 10px;
font-size: 20px;
color: #444;
cursor:pointer;
}

input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
}

input.star-5:checked ~ label.star:before {
color: #FE7;
}

input.star-1:checked ~ label.star:before { color: #F62; }


label.star:before {
content: '\f006';
font-family: FontAwesome;
}

脚本 myFunction

  <script>
      function myFunction(rating) {
      document.getElementById("starRate").value = rating;
  </script>

输出：

enter image description here

Answer 1

如果为此使用无线电，您可以使用 javascript 将一个类应用于所有其他（价值较低的星星）。

function myFunction(rating) {
  document.querySelectorAll('input').forEach(cb => cb.classList.remove('highlight'))
  for (let i = Number(rating); i > 0; i--) {
    document.querySelector(`input[value="${i}"]`).classList.add('highlight')
  }
}

input {
  display: none;
}

input+label:before {
  content: '\f005';
}

input.highlight+label:before {
  color: gold;
}

<td>
  <input id="star-1" type="radio" name="rating" value="1" onclick="myFunction(this.value)" />
  <label for="star-1"></label>

  <input id="star-2" type="radio" name="rating" value="2" onclick="myFunction(this.value)" />
  <label for="star-2"></label>

  <input id="star-3" type="radio" name="rating" value="3" onclick="myFunction(this.value)" />
  <label for="star-3"></label>

  <input id="star-4" type="radio" name="rating" value="4" onclick="myFunction(this.value)" />
  <label for="star-4"></label>

  <input id="star-5" type="radio" name="rating" value="5" onclick="myFunction(this.value)" />
  <label for="star-5"></label>

  <input class="form-control" type="hidden" id="starRate" name="starRate" value="" readonly>
</td>

如果使用复选框，您可以遍历所有较低值的输入并选中它们。

function myFunction(rating) {
  document.querySelectorAll('input').forEach(cb => cb.checked = false)
  for (let i = Number(rating); i > 0; i--) {
    document.querySelector(`input[value="${i}"]`).checked = true
  }
}

input {
  display: none;
}

input+label:before {
  content: '\f005';
}

input:checked+label:before {
  color: gold;
}

<td>
  <input id="star-1" type="checkbox" value="1" onclick="myFunction(this.value)" />
  <label for="star-1"></label>

  <input id="star-2" type="checkbox" value="2" onclick="myFunction(this.value)" />
  <label for="star-2"></label>

  <input id="star-3" type="checkbox" value="3" onclick="myFunction(this.value)" />
  <label for="star-3"></label>

  <input id="star-4" type="checkbox" value="4" onclick="myFunction(this.value)" />
  <label for="star-4"></label>

  <input id="star-5" type="checkbox" value="5" onclick="myFunction(this.value)" />
  <label for="star-5"></label>
</td>

Answer 2

这是最终的工作代码。我没有碰过你的 HTML 文件。保持相同的代码和输入顺序我已经解决了您的问题。

您最初有一个隐藏的评分输入。为了使它工作，我只在点击星形图标时使用了 javascript setAttribute()。

还只使用了一个函数处理程序，而不是在 HTML 本身的每个输入中重复函数调用，这是一种糟糕的编码习惯。就这样分开了顾虑。 HTML 文件现在只包含 HTML，Javascript 负责逻辑部分和函数校准。

代码看起来更干净，并且遵循DRY 原则。

代码笔： https://codepen.io/emmeiWhite/pen/qBamGzm

let starRate = document.querySelector("#starRate");
document.querySelectorAll(".star").forEach(input=>{
  input.addEventListener("click",(e)=>{
    starRate.value = e.target.value;
    starRate.setAttribute("type","text");
  })
})

.inputsWrapper{
  width: 270px;
  display: flex;
  flex-direction:row-reverse;
  justify-content:space-between;
}

input.star { display: none; }

label.star {
float: center;
padding: 10px;
font-size: 20px;
color: #444;
cursor:pointer;
}

input.star:checked ~ label.star:before {
content: '\f005';
color: #FD4;
}

input.star-5:checked ~ label.star:before {
color: #FE7;
}

input.star-1:checked ~ label.star:before { color: #F62; }


label.star:before {
content: '\f006';
font-family: FontAwesome;
}

#starRate{
 width:20px;
  display:block;
}

<table>
  <tr> 
<th style="vertical-align:middle">Your Rating</th>

<td class="inputsWrapper">
    <input class="star star-5" id="star-5" type="radio" name="rating" value="5" 
    />
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="rating" value="4" 
    />
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="rating" value="3" 
    />
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="rating" value="2" 
    />
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="rating" value="1" 
   />
    <label class="star star-1" for="star-1"></label>
  <input class="form-control" type="hidden" id="starRate" name="starRate" readonly/>
</td>
</tr>
</table>

星级无法从左到右工作

2 个答案: