複数のイベントをバインドする方法)(上JQ

 

<!DOCTYPE HTML >
<HTML LANG = "EN" >
<ヘッド>
<メタ 文字セット = "UTF-8" >
<メタ = 「ビューポート」 コンテンツ = 「幅=装置幅、初期の規模= 1.0」 >
<META HTTP-当量 = "X-UA-互換性のある" コンテンツ = "IE =エッジ" >
<タイトル> 評価の効果 </ TITLE>
<スクリプト SRC = "../js/jquery.min.js" > < / SCRIPT>
<スタイル>
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