星星打分js

最新推荐文章于 2021-11-16 11:24:52 发布

wolf_Springs

最新推荐文章于 2021-11-16 11:24:52 发布

阅读量458

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ss19871028/article/details/38512243

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

项目要求做一个评分的操作...网上找了不少js发现都不是很合适..然后找到一个比较差不多的改了一下..合适自己用的...



var degree = ['未评分','1分|很差','2分|一般','3分|良好','4分|满意','5分|非常满意',''];


$(function(){
	//点星星
	$(document).on('mouseover','i[cjmark]',function(){
		var num = $(this).index();
		var pmark = $(this).parents('.revinp');
		var mark =  pmark.find('input');
	
		if(mark.prop('checked')) return false;
		
		var list = $(this).parent().find('i');
		for(var i=0;i<=num;i++){
			list.eq(i).attr('class','level_solid');
		}
		for(var i=num+1,len=list.length-1;i<=len;i++){
			list.eq(i).attr('class','level_hollow');
		}
		$(this).parent().next().html(degree[num+1]);

	})
	
	$(document).on('mouseout','i[cjmark]',function(){
		var pmark = $(this).parents('.revinp');
		var mark =  pmark.find('input');
		
		var list = $(this).parent().find('i');
		for(var i=0;i<=mark.val();i++){
			list.eq(i).attr('class','level_solid');
		}
		for(var i=mark.val(),len=list.length-1;i<=len;i++){
			list.eq(i).attr('class','level_hollow');
		}

		$(this).parent().next().html(degree[mark.val()]);

	})
	
	//点击星星
	$(document).on('click','i[cjmark]',function(){
		var num = $(this).index();
		var pmark = $(this).parents('.revinp');
		var mark = pmark.find('input');
		
		if(mark.prop('checked')){
			mark.val('');
			mark.prop('checked',false);mark.prop('disabled',true);	
		}else{
			mark.val(num+1);
			mark.prop('checked',true);mark.prop('disabled',false);	
		}
		
	})
	//选框
	$('#Addnewskill_119 input[type="checkbox"]').change(function(){
		if($(this).not(':checked')){//!($(this).prop('checked'))
			$(this).prop('checked',false);$(this).prop('disabled',true)
			var smark = $(this).nextAll('.revinp');
			smark.find('span.revgrade').html('未评分');
			smark.find('i').attr('class','level_hollow');
			smark.val(6);
		}
	})
	

})

 <table cellpadding="0" cellspacing="0" border="1" style="" class="pingjia" id="Addnewskill_119" >
			<tr><td width="20%">态度</td>
	        	<td class="starWrapper" οnmοuseοver="rate(this,event)" style=" padding-left:27px;">
	        		<div class="revinp">
						<span class="level">
							<i class="level_solid" cjmark=""></i>
							<i class="level_solid" cjmark=""></i>
							<i class="level_solid" cjmark=""></i>
							<i class="level_solid" cjmark=""></i>
							<i class="level_hollow" cjmark=""></i>
						</span>
						<span class="revgrade">4分|满意</span>
						<input class="fl" id="fenshu1" type="checkbox" style="margin-top:2px;display: none;" value="4" />
					</div>
	        	</td>
        	</tr>
        	<tr><td width="20%">专业程度</td>
	        	<td class="starWrapper" οnmοuseοver="rate(this,event)" style=" padding-left:27px;">
	        		<div class="revinp">
						<span class="level">
							<i class="level_solid" cjmark=""></i>
							<i class="level_solid" cjmark=""></i>
							<i class="level_solid" cjmark=""></i>
							<i class="level_solid" cjmark=""></i>
							<i class="level_hollow" cjmark=""></i>
						</span>
						<span class="revgrade">4分|满意</span>
						<input class="fl" id="fenshu2" type="checkbox" style="margin-top:2px;display: none;" value="4" />
					</div>

	        	</td>
        	</tr>
				
			<tr><td style="height:50px;">是否解决</td><td style=" text-align:left; text-indent:2em;" > <input type="radio" value="1" name="isSolve" />已解决       <input name="isSolve" type="radio" value="2" />未解决</td></tr>
		</table>

.revinp{float:left;display:inline;}
.level .level_solid,.level .level_hollow{float:left;background-image:url("image/icon2.png");background-repeat:no-repeat;display:inline-block;width:15px;height:15px;}
.level .level_solid{background-position:0px 0px;}
.level .level_hollow{background-position:-21px 0px;}
.revgrade{margin-left:20px;}