发新贴  快速回复

百度文库评星作业,鼠标移出事件明明是定义在ul上的,但是只要移出li 还未出ul就触发了

  落地流苏
2021-03-24 23:40

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>小测试</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.clear{

*zoom: 1;

}

.clear:after{

content: '';

display: block;

clear: both;

}

#myStar{

float: left;

background: red;

height: 30px;

}

#myStar li{

list-style: none;

float: left;

width: 30px;

height: 30px;

margin-right: 15px;

border: 1px solid #ccc;

cursor: pointer;

background: #fff;

}

#myStar li.checked{

background: yellow;

}

#myStar li.checked.gray, #myStar li.checked.gray{

background: gray;

}

</style>

<script type="text/javascript">

window.err= = function(){

var oul = document.getElementById("myStar"); 

var ali = oul.getElementsByTagName("li");

oul.checked = 0; //鼠标点击选择了几个星星

 

for (var i = ali.length - 1; i >= 0; i--) {

var curli = ali[i];

curli.index = i;

 

//鼠标点击

curli.err= = function(){

var curIndex = this.index;

oul.checked = curIndex+1;

changeColor(curIndex);

}

 

//鼠标移入

curli.err= = function(){

var curIndex = this.index;

changeColor(curIndex);

}

};

 

//鼠标移出

oul.err= = function(){

console.log("出来了");  //为什么只是移出li明明还在ul里面 就触发了移出ul的事件

var checkNum = oul.checked;

changeColor(checkNum-1);

}

 

function changeColor(index){

var odiv = document.getElementById("starTip");

var tip = index>0 ? ali[index].getAttribute("data") : "请点击星星";

odiv.innerHTML = tip;

 

for (var j = ali.length - 1; j >= 0; j--) {

var oli = ali[j];

if(j>index){

oli.setAttribute("class","");

}else{

index>1 ? oli.setAttribute("class","checked") : oli.setAttribute("class","checked gray");

}

}

}

}

</script>

</head>

<body>

 

<ul id="myStar">

<li data="差劲"></li>

<li data="一般"></li>

<li data="看好"></li>

<li data="推荐"></li>

<li data="力荐"></li>

</ul>

<div id="starTip">请点击星星</div>

</body>

</html>

本帖内容针对以下视频发布:

2-运算符、程序流程控制(下)
 
落地流苏

https://study.miaov.com/v_show/631

这个视频里有讲解决方法,它的上一集有讲原因

2021-03-26 17:50  回复本帖
登录 后才可以发表回复