Jinja2循环渲染星级单选按钮应用CSS后仅首条可点击问题求助

你的问题核心是DOM id全局重复：HTML规范要求页面内所有元素的id必须唯一，你在Jinja2循环中给每个图书的评分单选框都复用了five/four/three/two/one这几个固定id，而label的for属性会匹配页面内第一个对应id的输入框，所以只有第一个表单的星级点击能触发对应输入框的状态变化，后续表单的星级点击都会绑定到第一个表单的输入框上，看起来就是无法点击。移除CSS后你能直接点到原生单选框，所以看起来恢复正常，本质是原生单选框不会被label的错误绑定影响。

你需要做两处修改即可解决问题：

1. 给循环生成的每个单选框的id、对应label的for属性拼接唯一标识（推荐用图书idtransaction['book_id']），保证id全局唯一
2. 修改CSS选择器，将原来基于id匹配评分文案的规则，改为基于单选框的value属性匹配，适配动态生成的id

修改后的Jinja2模板代码 #

{%for transaction in shelfinfos%}
{% set book_id = transaction['book_id'] %}
<form action="/account/addreview/{{book_id}}" method="POST">
   <div class="modal-body">
      <div class="center">
         <div class="stars">
            <input type="radio" id="five_{{book_id}}" name="rate" value="5" required>
            <label for="five_{{book_id}}"></label>
            <input type="radio" id="four_{{book_id}}" name="rate" value="4">
            <label for="four_{{book_id}}"></label>
            <input type="radio" id="three_{{book_id}}" name="rate" value="3">
            <label for="three_{{book_id}}"></label>
            <input type="radio" id="two_{{book_id}}" name="rate" value="2">
            <label for="two_{{book_id}}"></label>
            <input type="radio" id="one_{{book_id}}" name="rate" value="1">
            <label for="one_{{book_id}}"></label>
            <span class="result"></span>
         </div>
      </div>
      <textarea id="review_{{book_id}}" class="text-control"
         name="review" placeholder="Your thoughts..."></textarea>
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-secondary"
         data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary">Save
      changes</button>
   </div>
</form>
{%endfor%}

修改后的CSS代码 #

<style>
    @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.center .stars{
  text-align: center;
}
.stars {
  align-self: center;
}
.stars input{
  display: none;
}
.stars label{
  float: right;
  font-size: 3em;
  color: lightgrey;
  margin: 0 5px;
  text-shadow: 1px 1px #bbb;
}
.stars label:before{
  content: '★';
}
.stars input:checked ~ label{
  color: gold;
  text-shadow: 1px 1px #c60;
}
.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label{
  color: gold;
}
.stars input:checked > label:hover,
.stars input:checked > label:hover ~ label{
  color: gold;
  text-shadow: 1px 1px goldenrod;
}
.stars input:checked ~ .result:before{
  display: block;
}
/* 替换原id选择器为value属性选择器，通用所有表单 */
.stars input[value="5"]:checked ~ .result:before{
  content: "I love it ";
}
.stars input[value="4"]:checked ~ .result:before{
  content: "I like it ";
}
.stars input[value="3"]:checked ~ .result:before{
  content: "It's good ";
}
.stars input[value="2"]:checked ~ .result:before{
  content: "I don't like it ";
}
.stars input[value="1"]:checked ~ .result:before{
  content: "I hate it ";
}
</style>

内容的提问来源于stack exchange，提问作者Quote