大家好，我第一次在這裡發文求教，想懇請各位高手幫我看一下下面這段程式，滑鼠移出(onmouseout)的部分我怎麼看都看不懂，前面寫current = -1，接下來 onmouseout下面又寫 j<= current ，但 j 不可能會有<= -1 的情況啊，所以為什麼要這麼寫？？
我是新手，第一次發文，有不懂規矩的地方還請多包涵，謝謝！ ^_^
<script type = 'text/javascript'>
var aLi = document.getElementsByTagName('li');
var oIinfo = document.getElementsByTagName('p')[0];
var current = -1;
for(i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onmouseover = function(){
for(j=0;j<aLi.length;j++){
if(j<=this.index){
aLi[j].className = 'active';
}else{
aLi[j].className = null;
}
}
}
aLi[i].onmouseout = function(){
for(j=0;j<aLi.length;j++){
if(j<= current){ //看不懂的地方
aLi[j].className = 'active';
}else{
aLi[j].className = null;
}
}
}
}
</script>
已邀請的邦友 {{ invite_list.length }}/5
或許還有一段沒貼出來...
裡面會有 onMouseDown,onMouseMove 之類的 , 會變動 current 的值
https://www.ezloo.com/2008/11/onmouse_onkey.html
我已經把javascript部分的程式碼都貼出來了啊
for(i=0;i<aLi.length;i++){
// 加入以下4行
aLi[i].onmousedown = function(){
current=this.index;
aLi[i].className = 'active';
}
應該是 rogeryao 說的沒錯
像是這樣：https://jsfiddle.net/3uqLbhra/
之所以留那個 current 就是為了之後使用者選擇了之後
滑鼠離開星星還是會保留評分
所以要加上滑鼠點擊後改變 current 的事件
to 淺水員:
我寫得很精簡,都被你看出來.... 不好玩
其實我是寫完後發現有人回答過了
所以放在留言這邊
畫星星多花了一些時間呢…
最近三週剛好為了一個純Javascript的D3專案學了Javascript, 踩了一些坑, 但也都解決, 快上線了, 因此也來獻醜:
@rogeryao和@潛水員都寫得很好, 也測試fiddle的程式. 發現有一個bug:
當您點擊了任何一顆星星, 第一顆就永遠亮著消不掉了. 因此我再最外的for loop前加了一段:
window.onclick = function(event) {
for (i=0; i<aLi.length;i++){
if (event.target != aLi[i]) aLi[i].className = null;
}
}
當點擊到星星以外的地方, 就消掉所有的星星:
https://jsfiddle.net/brian20181109/49szhweo/15/
20181109T2058
每次看到一樣的程式碼, 就想湊成一個:
https://jsfiddle.net/brian20181109/azLqm1d5/6/
謝謝大家！
特別是淺水員，竟然還特地畫星星！
這樣就行了:
var aLi = document.getElementsByTagName('li');
var oIinfo = document.getElementsByTagName('p')[0];
for(i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onmouseover = function(){
for(j=0;j<aLi.length;j++){
if(j<=this.index){
aLi[j].className = 'active';
}else{
aLi[j].className = null;
}
}
}
}
其它都是多餘的, 就像我講的他只是改了作法忘了刪舊程式
範例
嗯...不是這樣哩，照你的作法試了一下，把onmouseout的部分全刪了後，onmouseover就無法正常執行了，滑鼠移入的效果全沒了...
這堂課是在教作出用五顆星星來評分的程式，滑鼠移到星星上，星星就亮起來，滑鼠移出後，星星又恢復原狀。
我把其他部分的程式碼也貼出來好了，但要有星星的圖檔才能執行
ul{
list-style: none;
width: 150px;
height: 29px;
margin: 30px;
}
li{
float: left;
width: 30px;
height: 25px;
background: url(img/star.png);
}
.active{
background-position-y: -20px;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p></p>
14881411 你點我那個範例進去跑看看, 是好的還是壞的
今天終於弄懂了，在後面加上
aLi[i].onclick = function(){
current = this.index;
oIinfo.innerHTML = '評分' + (current+1);
}
就一切合理了
也謝謝你
你把圖檔給我, 我幫你看看
那個 current 應該是記錄「使用者選擇的星星數」-1
你把 current 改成 0..4 再看看效果就知道了
使用情境是
使用者第二次到此頁面
想修改星星數時可以使用
如果你不想讓使用者修改星星數
那麼這個變數程式碼就沒什麼用了...
你的問題其實很難說。這裏要區分事件跟程序化的說法來看。
如果你的js程式碼就只有這些的話。你的想法是對的，你覺得有問題的地方是一個矛盾的點。
可是，我為什麼一開始要區分事件跟程序化來看。
換另外一個角度跟說法來讓你明白一下。
var current = -1;
這一段，只是預先宣告current這個變數。在javascript中來說，其實在主體script宣告變數的情況下，就等於是全域式的宣告了。也就是說，在其它的相關script也都可以去使用到這個變數。
再來再來看看你說的 f(j<= current) 有問題的地方。
其實這段程式碼是寫在一個事件內。也就是說，它也只是宣告一個事件動作。然後拿current變數來做區分。事件宣告並不會被動作運行程式。那只有一但事件發生時，才會跑那一段程式。
單單從你po的程式碼中，確實看起來有點怪怪的，但其實不一定。
因為在一開頭就說了。current這個變數一開頭就已經宣告為一個全域性的變數。
也就是說current這個變數，可以被在其它地方的js程式中被改變數值。
以上也有幾個人po上你的參考來源。(不要問我們為何會知道)
所以你覺得奇怪的那行程式碼，其實也一定不奇怪。那只是一種保護的作用。
講白話一點，就是你還沒了解current這個變數的用意是什麼。才會有此問題的發生。
另外題外話一點，你後面又回答了一篇程式碼。那只是利用了css的圖檔位移特性做顯示處理。
完全與那段js程式碼無關。也就是說，就會沒有那一段程式碼，光利用css的特性就可以做出你想要的效果。
不過說是這樣說，有可能你會需要做定義式的處理。這是css做不到的事。但也因為如此，我可以判斷，你的current參數，一定有在其它地方會被變動到。所以才會有這樣的判斷方式。
iThome鐵人賽
看影片追技術