HTML代碼 ~~~ <div class="paotui-head"> <div class="bottom-after myhead"> <img src="img/paotui/people.png" /> <span>跑腿員:金三胖</span> </div> </div> <div class="comment"> <div class="star"> <i data-index="1" class="icon iconfont icon-pingjia-xing2 xing"></i> <i data-index="2" class="icon iconfont icon-pingjia-xing2 xing"></i> <i data-index="3" class="icon iconfont icon-pingjia-xing2 xing"></i> <i data-index="4" class="icon iconfont icon-pingjia-xing2 xing"></i> <i data-index="5" class="icon iconfont icon-pingjia-xing2 xing"></i> <input type="hidden" class="star-hidden"> </div> <div class="comment-slogan"> <div class="slogan-box1"> <div class="slogan-tips">很差，需要改善</div> </div> <div class="slogan-box2"> <div class="slogan-tips">比較滿意，但仍可改善</div> </div> <div class="slogan-box3"> <div class="slogan-tips">非常滿意，希望能繼續保持</div> </div> </div> </div> <div class="bottom-button"> <input type="button" value="發布" /> </div> ~~~ css代碼 ~~~ body { background: #f0eff5; } .paotui-head { width: 100%; height: 60px; background: #fff; overflow: hidden; } .myhead { width: 100%; height: 60px; margin-left: 10px; margin-right: 10px; } .paotui-head .myhead img { float: left; width: 40px; height: 40px; margin-top: 10px; border-radius: 50%; } .paotui-head .myhead img+span { display: inline-block; height: 20px; margin-left: 5px; margin-top: 5px; font-size: 14px; color: #666; line-height: 60px; } .comment { width: 100%; height: 80px; padding: 0 20px; overflow: hidden; background: #fff; } .star { padding: 12px 0 0; text-align: center; } .star i { font-size: 26px; color: #C9CACA; } .star i.star-icon-filled { color: #f5d54b; } .comment-slogan { padding: 0 20px; } .slogan-box1, .slogan-box2, .slogan-box3 { display: none; } .slogan-tips { width: 100%; padding-top: 10px; text-align: center; font-size: 15px; color: #FF7E01; overflow: hidden; } .bottom-button { position: fixed; bottom: 0; width: 100%; height: 48px; } .bottom-button input[type="button"] { width: 100%; height: 48px; font-size: 16px; border: none; background: #ffdc44; } .bottom-button input[type="button"]:active { background: #ffdc44; color: #000; } ~~~ js的代碼 ~~~ /*選擇評分*/ mui('.star').on('tap','i',function(){ var index = parseInt(this.getAttribute("data-index")); var parent = this.parentNode; var children = parent.children; if(this.classList.contains("xing")){ for(var i=0;i<index;i++){ children[i].classList.remove('xingn'); children[i].classList.add('star-icon-filled'); } var data = $(this).attr("data-index"); $(".star-hidden").val(data) }else{ for (var i = index; i < 5; i++) { children[i].classList.add('xing') children[i].classList.remove('star-icon-filled') } var data = $(this).attr("data-index"); $(".star-hidden").val(data) } if (index ==1 || index == 2) { $(".slogan-box1").slideDown(300); $(".slogan-box2").hide(); $(".slogan-box3").hide(); $(".question").val(""); } if (index ==3 || index == 4) { $(".slogan-box2").slideDown(300); $(".slogan-box1").hide(); $(".slogan-box3").hide(); $(".question").val(""); } if (index ==5) { $(".slogan-box3").slideDown(300); $(".slogan-box1").hide(); $(".slogan-box2").hide(); $(".question").val(""); } }) ~~~