Question

我有一个有星级评分系统的表格。用户投票1至5星。它在前端工作得很好，但是当通过它发送电子邮件时，它会像这样：

'Rating-input-1：on'

我真的希望它能给我一些他们得分的数字（1 - 5），而不仅仅是'开'。有任何想法吗？我的HTML和CSS代码如下，如果您还需要其他任何内容，请与我们联系。

HTML：

<span class="rating">

         <input type="radio" class="rating-input"
            id="rating-input-1-1" name="rating-input-1">
        <label for="rating-input-1-1" class="rating-star"></label>
        <input type="radio" class="rating-input"
            id="rating-input-1-2" name="rating-input-1">
        <label for="rating-input-1-2" class="rating-star"></label>        
       <input type="radio" class="rating-input"
            id="rating-input-1-3" name="rating-input-1">
        <label for="rating-input-1-3" class="rating-star"></label>        
         <input type="radio" class="rating-input"
            id="rating-input-1-4" name="rating-input-1">
        <label for="rating-input-1-4" class="rating-star"></label>       
                <input type="radio" class="rating-input"
            id="rating-input-1-5" name="rating-input-1">
        <label for="rating-input-1-5" class="rating-star"></label>
    </span>

CSS：

.rating {
          overflow: hidden;
      }

      .rating-input {
          position: absolute;
          left: 0;
          top: -50px;
      }
      .rating:hover .rating-star:hover,
      .rating:hover .rating-star:hover ~ .rating-star,
      .rating-input:checked ~ .rating-star {
          background-position: 0 0;
      }
      .rating-star,
      .rating:hover .rating-star {
          float: right;
          display: block;
          width: 30px;
          height: 30px;
          background: url(images/stars2-2.png) 0 -30px;
      }

      .rating-star:hover {
            -webkit-transition: -webkit-width 0.5s;
    -moz-transition: -moz-width 0.5s;
    -ms-transition: -ms-width 0.5s;
    -o-transition: -o-width 0.5s;
    transition: width 0.5s;
      }

Answer 1

也许你可以尝试在每个输入中添加'value'属性。像这样：

<input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1" value="1">
<input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1" value="2">

星级表格 - 电子邮件评分

1 个答案: