一、星级评分效果
//如何添加默认样式？循环添加空白的星星效果。对于其中默认的已选星星效果，需进行判断之后在添加特殊样式
let count=11;
let score=5;
for (let i = 0; i < count; i++) {//循环添加样式
let star=$('<i/>').addClass('iconfont star')
//定义变量star 为li标签且添加iconfont star的样式
if(i<score){
star.addClass("icon-start-copy")
}else{
star.addClass('icon-star1')
}
$('.container').append(star)//将生成的star添加进container
}
//鼠标移入时是什么效果？移出又是什么效果？鼠标移入后，星级会暂时显示 鼠标移出后恢复原来样子
$('.star').mouseenter(function (){//鼠标移入添加样式
let index=$(this).index();
for(let i=0;i<count;i++){
let star=$('.star').eq(i)
if(i<=index){
star.addClass('icon-start-copy').removeClass('icon-star1')
}else{
star.removeClass('icon-start-copy').addClass('icon-star1')
}
}
})
$('.star').mouseleave(function (){//鼠标移出恢复原来样式
for (let i = 0; i < count; i++) {
let star=$('.star').eq(i);
if(i<score){
star.addClass('icon-start-copy').removeClass('icon-star1')
}else{
star.addClass('icon-star1').removeClass('icon-start-copy')
}
}
})
//鼠标点击时是什么效果？点击时 星级被选上 移出后 选择的星级不会消失
$('.star').click(function (){//鼠标点击当前星级 添加样式
score=$(this).index()+1;
})
二、QQ分组效果
//QQ分组什么效果？点击对应分组后 展开对应联系人 并且右箭头图标变化为下箭头
$('.menu .title').click(function(){//鼠标点击对应分组
$(this).find('i').toggleClass('icon-arrow-right').toggleClass('icon-arrow')
//运用toggleClass（） 对于对应的图标 进行变化
let list=$(this).next()
list.toggle();
//运用toggle() 进行列表展开和隐藏
})
