jq on()怎么绑定多个事件

<!DOCTYPE html >
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
<title>评分效果 </title>
<script src= "../js/jquery.min.js" > < /script>
<style>
ul li{ padding: 0; list-style: none}
li{ width: 30px; height: 30px; border: 1px solid #333; float: left; margin-right: 10px}
< /style>
</head>
<body>
<ul class= "ul01" >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
$( function(){
$( "li").on({
mouseover: function(){
if($( this).css( "backgroundColor") == '#ff0000'){
$( this).css( "background", "");
console.log($( this).css( "backgroundColor"))
} else{
$( this).css( "background", "red").prevAll( "li").css( "background", "red");
console.log($( this).css( "backgroundColor"))
}
},
mouseout: function(){
$( this).css( "background", "")
},
click: function(){
$( this).off( "mouseout")
$( this).css( "background", "red").prevAll( "li").css( "background", "red");
}
})
})
< /script>
</body>
</html>


猜你喜欢

转载自www.cnblogs.com/hilxj/p/11110129.html