分類
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<div class="order-evaluation clearfix"> <h4>給“新聞訂單”的評價</h4> <p>請嚴肅認真對待此次評價哦!您的評價對我們真的真的非常重要!</p> <div class="block"> <ul> <li data-default-index="0"> <span> <img src="img/x1.png"> <img src="img/x1.png"> <img src="img/x1.png"> <img src="img/x1.png"> <img src="img/x1.png"> </span> <em class="level"></em> </li> </ul> </div> <div class="order-evaluation-text"> 本次交易,乖,摸摸頭 給您留下了什么印象呢? </div> <div class="order-evaluation-checkbox"> <ul class="clearfix"> <li class="order-evaluation-check" data-impression="1">專業(yè)水平高<i class="iconfont icon-checked"></i></li> <li class="order-evaluation-check" data-impression="2">交付準時<i class="iconfont icon-checked"></i></li> <li class="order-evaluation-check" data-impression="3">效果明顯<i class="iconfont icon-checked"></i></li> <li class="order-evaluation-check" data-impression="4">數(shù)據(jù)分析準確<i class="iconfont icon-checked"></i></li> <li class="order-evaluation-check" data-impression="5">能力待提高<i class="iconfont icon-checked"></i></li> <li class="order-evaluation-check" data-impression="6">工期延誤<i class="iconfont icon-checked"></i></li> </ul> </div> <div class="order-evaluation-textarea"> <textarea name="content" id="TextArea1" onKeyUp="words_deal();" ></textarea> <span>還可以輸入<em id="textCount">140</em>個字</span> </div> <a href="javascript:;" id="order_evaluation">評價完成</a> </div> <div id="order_evaluate_modal" class="dmlei_tishi_info"></div> <script type="text/javascript"> /* * 根據(jù)index獲取 str * **/ function byIndexLeve(index){ var str =""; switch (index) { case 0: str="差評"; break; case 1: str="較差"; break; case 2: str="中等"; break; case 3: str="一般"; break; case 4: str="好評"; break; } return str; } // 星星數(shù)量 var stars = [ ['x2.png', 'x1.png', 'x1.png', 'x1.png', 'x1.png'], ['x2.png', 'x2.png', 'x1.png', 'x1.png', 'x1.png'], ['x2.png', 'x2.png', 'x2.png', 'x1.png', 'x1.png'], ['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x1.png'], ['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x2.png'], ]; $(".block li").find("img").hover(function(e) { var obj = $(this); var index = obj.index(); if(index < (parseInt($(".block li").attr("data-default-index")) -1)){ return ; } var li = obj.closest("li"); var star_area_index = li.index(); for (var i = 0; i < 5; i++) { li.find("img").eq(i).attr("src", "img/" + stars[index][i]);//切換每個星星 } $(".level").html(byIndexLeve(index)); }, function() { }) $(".block li").hover(function(e) { }, function() { var index = $(this).attr("data-default-index");//點擊后的索引 index = parseInt(index); console.log("index",index); $(".level").html(byIndexLeve(index-1)); console.log(byIndexLeve(index-1)); $(".order-evaluation ul li:eq(0)").find("img").attr("src","img/x1.png"); for (var i=0;i<index;i++){ $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","img/x2.png"); } }) $(".block li").find("img").click(function() { var obj = $(this); var li = obj.closest("li"); var star_area_index = li.index(); var index1 = obj.index(); li.attr("data-default-index", (parseInt(index1)+1)); var index = $(".block li").attr("data-default-index");//點擊后的索引 index = parseInt(index); console.log("index",index); $(".level").html(byIndexLeve(index-1)); console.log(byIndexLeve(index-1)); $(".order-evaluation ul li:eq(0)").find("img").attr("src","img/x1.png"); for (var i=0;i<index;i++){ $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","img/x2.png"); } }); //印象 $(".order-evaluation-check").click(function(){ if($(this).hasClass('checked')){ //當前為選中狀態(tài),需要取消 $(this).removeClass('checked'); }else{ //當前未選中,需要增加選中 $(this).addClass('checked'); } }); //評價字數(shù)限制 function words_deal() { var curLength=$("#TextArea1").val().length; if(curLength>140) { var num=$("#TextArea1").val().substr(0,140); $("#TextArea1").val(num); alert("超過字數(shù)限制,多出的字將被截斷!" ); } else { $("#textCount").text(140-$("#TextArea1").val().length); } } $("#order_evaluation").click(function(){ $("#order_evaluate_modal").html("感謝您的評價!么么噠(*  ̄3)(ε ̄ *)").show().delay(3000).hide(500); }) </script>
1. 本站所有素材(未指定商用),僅限學習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權,著作權歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權,請勿用于商業(yè)用途,會員不得以任何形式發(fā)布、傳播、復制、轉售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統(tǒng)商業(yè)用途請預先授權。