jquery实现用户打分评分特效

前端技术 2023/09/01 JavaScript

js代码：

<script type=\"text/javascript\">
$(function(){

 //简洁用户评分代码
 $(\".pfxtFen li\").click(function(){
 $(this).addClass(\"pfxtCur\");
 $(this).prevAll().addClass(\"pfxtCur\");
 $(this).nextAll().removeClass(\"pfxtCur\");
 });
 
 $(\".pfxtFen li\").dblclick(function(){
 $(\".pfxtFen li\").removeClass(\"pfxtCur\");
 });
 
})
</script>

CSS

<style type=\"text/css\">
*{margin:0;padding:0; font-family:\"微软雅黑\"}
ul{ list-style:none;}
 /*用户评分*/
.pingfenxitong{
 padding:15px 0;
 width:500px;
 margin:0 auto;
 }
.pingfenList{
 float:left;
 width:500px;
 padding-right:20px;
 }
.pfxtTitle{
 font-weight:bold;
 font-size:1.2em;
 padding:4px 0;
 }
.pfxtText{
 line-height:25px;
 }
.pfxtFen{
 margin:10px 0;
 }
.pfxtFen li{
 float:left;
 width:98px;
 height:30px;
 text-align:center;
 line-height:30px;
 border:#ddd 1px solid;
 background:#f1f1f1;
 cursor:pointer;
 }
.pfxtFen li.pfxtCur{
 background:#308A95;
 color:#fff;
 border:#308A95 1px solid;
 }

</style>

HTML

<div class=\"pingfenxitong\">

 <div class=\"pingfenList\">
 
 <div class=\"pfxtTitle\">功能：</div>
 <div class=\"pfxtText\">你觉得这个创意在功能上优秀吗？</div>
 <ul class=\"pfxtFen\" title=\"双击取消评分\">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <div class=\"clearfix\"></div>
 </ul>
  
 <div class=\"pfxtRight\"></div>
 <div class=\"clearfix\"></div>
 </div>
 
 <div class=\"pingfenList\">
 <div class=\"pfxtTitle\">外观：</div>
 <div class=\"pfxtText\">你觉得这个创意在外观上优秀吗？</div>
 <ul class=\"pfxtFen\" title=\"双击取消评分\">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <div class=\"clearfix\"></div>
 </ul>
 <div class=\"pfxtRight\"></div>
 <div class=\"clearfix\"></div>
 </div>
 
 <div class=\"pingfenList\">
 <div class=\"pfxtTitle\">成本：</div>
 <div class=\"pfxtText\">你觉得这个创意在成本上优秀吗？</div>
 <ul class=\"pfxtFen\" title=\"双击取消评分\">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <div class=\"clearfix\"></div>
 </ul>
 <div class=\"pfxtRight\"></div>
 <div class=\"clearfix\"></div>
 </div>
 
 <div class=\"pingfenList\">
 <div class=\"pfxtTitle\">难度：</div>
 <div class=\"pfxtText\">你觉得这个创意在难度上可行吗？</div>
 <ul class=\"pfxtFen\" title=\"双击取消评分\">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <div class=\"clearfix\"></div>
 </ul>
 <div class=\"pfxtRight\"></div>
 <div class=\"clearfix\"></div>
 </div>
 
 <div class=\"clearfix\"></div>

</div>

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/3148

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案