使用HTML，css，js制作的一个满意度选择

1.在用户反馈中需要做评级，评价之类的选择器,选择的值在form表单中如何提交。

首先，我们先建立一个form表单

<form action='#'>

</form>

因为评价我们是直接选择的而不是输入，所以我们要使用hidden将input隐藏起来

 <input type="hidden" name="Topicname31" id = "Q1" value="0"/>

然后就开始制作选择类型啦

 <input type="hidden" name="Topicname41" id = "Q8" value="1"/>
 <img id="img1-0" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
 <img id="img1-1" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
<img id="img1-2" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
<img id="img1-3" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
<img id="img1-4" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
 <img id="img1-5" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
 <img id="img1-6" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
<img id="img1-7" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
<img id="img1-8" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />
  <img id="img1-9" class="text" onclick="changeImg1(this)"
                            src="./images/3bd0bef130c70826919c9a5b65a85ce.png" />

name的值要与数据库对应，id自己起一个独一无二的就好，设定初始的value值为0，然后选择就在js里面更新value的值,提交form表单value就被携带回去啦

---

js写法

//更改class属性写法
function changClass(e){
    var value = document.getElementById("Q1").value
    for (var i = 1 ; i <= 5 ; i ++){
        var ee = document.getElementById('div1-' + i);
        if (e.id >= 'div1-' + i){
            ee.className='smallBlock' + i;
            value = i;
        }else{
            ee.className='smallBlock6'
        }
        
    }
  
}

//更改图片写法
function changeImg1(e){  
    var value = document.getElementById("Q8").value
    for (var i = 0 ; i <= 9 ; i ++){
        var ee = document.getElementById('img1-' + i);
        if (e.id >= 'img1-' + i){
            value = i;
            ee.src='./images/7c590d65486a2e8273855400873dd30.png'
        }else{
            ee.src='./images/3bd0bef130c70826919c9a5b65a85ce.png'
        }
        
    }
}

这样一个选择就做好啦