最近在做一題是關於mouseover的問題，我有五顆星，滑鼠有左到右移過去會亮，由又到左移過來就關掉，以下是我的程式碼
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet" href="sh_style.css">
<title>Hello, world!</title>
</head>
<style>
table {
width: 600px;
border: 3px solid #009FCC;
border-collapse: collapse;
border-collapse: collapse;
background-color: rgb(60, 255, 0);
}
td {
padding-left: 8px;
padding-right: 0px;
width: 55px;
border: 2px solid #008866;
color: red;
}
.s {
-webkit-filter: grayscale(1);
/*沒有任何色彩的黑白影像*/
}
.n {
-webkit-filter: grayscale(0);
/*顏色不變*/
}
</style>
<script>
// http://blog.shihshih.com/css-filter/
document.addEventListener("DOMContentLoaded", function () {
var imgs = document.querySelectorAll("img.s");
var imgsLen = imgs.length;
for (var i = 0; i < imgsLen; i++) {
imgs[i].addEventListener("mouseover", mouseOver);
imgs[i].addEventListener("mouseout", mouseOut);
// imgs[i].addEventListener("click",Click);
}
});
function mouseOver() {
var num = this.id.substr(4);
for (var i = 1; i <= num; i++) {
document.getElementById("star" + i).className = "n";
}
}
function mouseOut() {
for (var i = num; i > 0; i--) {
document.getElementById("star" + i).className = "s";
}
}
</script>
<body>
<div class="container-fluid">
<div class="row">
<div class=" col-lg-3 grid-1">logo</div>
<div class=" col-lg-6 grid-1">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="九九乘法.html">homework1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="form.html">homework2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Hw3.html</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">homework4</a>
</li>
</ul>
</div>
<div class=" col-lg-3 grid-1">logo</div>
</div>
<div class="row">
<div class="col-lg-3 grid-1">logo</div>
<div class="col-lg-6 grid-1">
<center>
<img id="star1" class="s" src="images/star.jpg" />
<img id="star2" class="s" src="images/star.jpg" />
<img id="star3" class="s" src="images/star.jpg" />
<img id="star4" class="s" src="images/star.jpg" />
<img id="star5" class="s" src="images/star.jpg" />
</center>
</div>
<div class="col-lg-3 grid-1">logo</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
</body>
</html>
我現在可以由左到右讓他亮，可是卻沒辦法由右到左讓他暗下來，我想請問我是錯在哪個地方?
已邀請的邦友 {{ invite_list.length }}/5
https://jsbin.com/gokotaforo/1/edit?html,output
這樣？
你事件用錯了，根本不需要mouseOut。
最近在認真學 vue.js，感覺js功力增進不少，但是學完後發現對工作上沒省多少事。XD
其實我是建議用點擊，用mouseover太容易誤操作了。
然後上面的code，因為用了es6，ie應該不能動。
太感謝了，這寫法是老師給我們的提示，再請問
elm => elm.addEventListener這種是屬於LAMBDA寫法嗎?
這種的我還不太會用，我再研究看看，謝謝
es6的箭頭函數。
原本函數長成這樣。
還在學的可以先不要管這個，理解就好，我是懶得打字。
// 參數只有一個，並且只有一行回傳值時
var fn = function(i){
return i + 1
}
// 參數只有一個以上，函數不只有一行回傳值時
var fn2 = function(x, y){
x *= x;
y += y;
return [x, y]
}
用箭頭函數寫：
var fn = i => i+1
var fn2 = (x, y) => {
x *= x;
y += y;
return [x, y]
}
規則可以看這邊：
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions
可以試試看
function mouseOver(e) {
console.log(e)
}
function mouseOut(e) {
console.log(e)
}
比較 mouseOver與 mouseOut當中的 e.clientY
由左至右 => "mouseOver的 e.clientY" < "mouseOut的 e.clientY"
由右至左 => "mouseOver的 e.clientY" > "mouseOut的 e.clientY"
或許可以透過事件(event)當中的 Y值給您一些幫助
提供思路給您！加油
iThome鐵人賽
看影片追技術