iT邦幫忙

0

求教,看不懂這段javascript程式碼

大家好,我第一次在這裡發文求教,想懇請各位高手幫我看一下下面這段程式,滑鼠移出(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>
看更多先前的討論...收起先前的討論...
weiclin iT邦高手 4 級 ‧ 2018-11-08 20:48:28 檢舉
看起來像是之前用 current 紀錄 index, 不過後來作法改掉了忘記拿掉
14881411 iT邦新手 5 級 ‧ 2018-11-08 20:57:25 檢舉
看起來是這樣,但那一部分又不能刪掉。
我覺得 j<=current的部分實在很奇怪,就把那段程式碼改為

aLi[i].onmouseout = function(){
for(j=0;j<aLi.length;j++){
aLi[j].className = null;
}
}
但改了之後,整段程式就無法正常執行了,滑鼠移入的效果完全動不起來,請問是怎麼回事啊??
是我修改的不好所以才出錯嗎? 那請問這段要怎麼改才對呢?
14881411 iT邦新手 5 級 ‧ 2018-11-08 21:21:17 檢舉
附帶一提,這是我在udemy上學javascript課程時,一個老師寫的程式碼,我問了他好幾天,但問不出所以然來  ....= =
weiclin iT邦高手 4 級 ‧ 2018-11-08 21:29:55 檢舉
我想大概要做類似這個功能吧, 你參考看看
https://ithelp.ithome.com.tw/questions/10190247
14881411 iT邦新手 5 級 ‧ 2018-11-08 22:17:05 檢舉
我知道那段程式是要作什麼功能啊,我不了解的是,onmouseout的迴圈裡,怎會有
j<= current(current的值是-1)這種奇怪的寫法??

j 的值是0~4,不可能會有<=-1的情況啊,但少了j<= current這段又不行,刪了後,滑鼠移入onmouseover的效果就完全沒了,太奇怪了,不懂當中的邏輯,還請高手解釋指點一下,謝謝!
j<= current這一段應該是那位老師還沒實作/被刪掉所遺留下來的程式碼
效果是讓滑鼠移出後,星星能停留在先前的位置,而不是全部消掉

邦友的回答也都試著幫你補全了
不要太執著在那一段程式碼了
14881411 iT邦新手 5 級 ‧ 2018-11-09 23:00:36 檢舉
今天終於弄懂了,在後面加上aLi[i].onclick = function(){
current = this.index;
oIinfo.innerHTML = '評分' + (current+1);
}
就一切合理了
14881411 iT邦新手 5 級 ‧ 2018-11-09 23:09:05 檢舉
謝謝你們!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
rogeryao
iT邦大師 1 級 ‧ 2018-11-08 22:37:44

或許還有一段沒貼出來...
裡面會有 onMouseDown,onMouseMove 之類的 , 會變動 current 的值
https://www.ezloo.com/2008/11/onmouse_onkey.html

看更多先前的回應...收起先前的回應...
14881411 iT邦新手 5 級 ‧ 2018-11-08 23:02:28 檢舉

我已經把javascript部分的程式碼都貼出來了啊

rogeryao iT邦大師 1 級 ‧ 2018-11-08 23:33:31 檢舉

for(i=0;i<aLi.length;i++){
// 加入以下4行
aLi[i].onmousedown = function(){
current=this.index;
aLi[i].className = 'active';
}

https://jsfiddle.net/1sqrem6n/

淺水員 iT邦大師 6 級 ‧ 2018-11-09 00:59:18 檢舉

應該是 rogeryao 說的沒錯
像是這樣:https://jsfiddle.net/3uqLbhra/

之所以留那個 current 就是為了之後使用者選擇了之後
滑鼠離開星星還是會保留評分
所以要加上滑鼠點擊後改變 current 的事件

rogeryao iT邦大師 1 級 ‧ 2018-11-09 08:48:48 檢舉

to 淺水員:
我寫得很精簡,都被你看出來.... 不好玩
/images/emoticon/emoticon12.gif

淺水員 iT邦大師 6 級 ‧ 2018-11-09 14:30:59 檢舉

其實我是寫完後發現有人回答過了
所以放在留言這邊
畫星星多花了一些時間呢…

bizpro iT邦大師 1 級 ‧ 2018-11-09 16:50:17 檢舉

最近三週剛好為了一個純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/

14881411 iT邦新手 5 級 ‧ 2018-11-09 23:04:57 檢舉

謝謝大家!
特別是淺水員,竟然還特地畫星星!

0
weiclin
iT邦高手 4 級 ‧ 2018-11-08 22:38:19

這樣就行了:

  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;
        }
      }
    }
  }

其它都是多餘的, 就像我講的他只是改了作法忘了刪舊程式
範例

看更多先前的回應...收起先前的回應...
14881411 iT邦新手 5 級 ‧ 2018-11-08 23:06:05 檢舉

嗯...不是這樣哩,照你的作法試了一下,把onmouseout的部分全刪了後,onmouseover就無法正常執行了,滑鼠移入的效果全沒了...

14881411 iT邦新手 5 級 ‧ 2018-11-08 23:21:57 檢舉

這堂課是在教作出用五顆星星來評分的程式,滑鼠移到星星上,星星就亮起來,滑鼠移出後,星星又恢復原狀。
我把其他部分的程式碼也貼出來好了,但要有星星的圖檔才能執行

        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>
weiclin iT邦高手 4 級 ‧ 2018-11-08 23:39:36 檢舉

14881411 你點我那個範例進去跑看看, 是好的還是壞的

14881411 iT邦新手 5 級 ‧ 2018-11-09 23:06:49 檢舉

今天終於弄懂了,在後面加上
aLi[i].onclick = function(){
current = this.index;
oIinfo.innerHTML = '評分' + (current+1);
}
就一切合理了

14881411 iT邦新手 5 級 ‧ 2018-11-09 23:14:14 檢舉

也謝謝你

0
小魚
iT邦大師 1 級 ‧ 2018-11-08 23:52:39

你把圖檔給我, 我幫你看看

14881411 iT邦新手 5 級 ‧ 2018-11-09 23:13:39 檢舉

已經解決了,謝謝!

小魚 iT邦大師 1 級 ‧ 2018-11-10 05:25:06 檢舉

我也覺得應該要有

current = this.index;

不過你就說跑起來一切正常我也不知道要說什麼...

0
海綿寶寶
iT邦大神 1 級 ‧ 2018-11-09 09:46:14

那個 current 應該是記錄「使用者選擇的星星數」-1
你把 current 改成 0..4 再看看效果就知道了

使用情境是
使用者第二次到此頁面
想修改星星數時可以使用

如果你不想讓使用者修改星星數
那麼這個變數程式碼就沒什麼用了...

14881411 iT邦新手 5 級 ‧ 2018-11-09 23:02:25 檢舉

今天終於弄懂了,在後面加上
aLi[i].onclick = function(){
current = this.index;
oIinfo.innerHTML = '評分' + (current+1);
}
就一切合理了

0

你的問題其實很難說。這裏要區分事件跟程序化的說法來看。
如果你的js程式碼就只有這些的話。你的想法是對的,你覺得有問題的地方是一個矛盾的點。

可是,我為什麼一開始要區分事件跟程序化來看。

換另外一個角度跟說法來讓你明白一下。

var current = -1;
這一段,只是預先宣告current這個變數。在javascript中來說,其實在主體script宣告變數的情況下,就等於是全域式的宣告了。也就是說,在其它的相關script也都可以去使用到這個變數。

再來再來看看你說的 f(j<= current) 有問題的地方。
其實這段程式碼是寫在一個事件內。也就是說,它也只是宣告一個事件動作。然後拿current變數來做區分。事件宣告並不會被動作運行程式。那只有一但事件發生時,才會跑那一段程式。

單單從你po的程式碼中,確實看起來有點怪怪的,但其實不一定。
因為在一開頭就說了。current這個變數一開頭就已經宣告為一個全域性的變數。
也就是說current這個變數,可以被在其它地方的js程式中被改變數值。
以上也有幾個人po上你的參考來源。(不要問我們為何會知道)

所以你覺得奇怪的那行程式碼,其實也一定不奇怪。那只是一種保護的作用。
講白話一點,就是你還沒了解current這個變數的用意是什麼。才會有此問題的發生。

另外題外話一點,你後面又回答了一篇程式碼。那只是利用了css的圖檔位移特性做顯示處理。
完全與那段js程式碼無關。也就是說,就會沒有那一段程式碼,光利用css的特性就可以做出你想要的效果。
不過說是這樣說,有可能你會需要做定義式的處理。這是css做不到的事。但也因為如此,我可以判斷,你的current參數,一定有在其它地方會被變動到。所以才會有這樣的判斷方式。

14881411 iT邦新手 5 級 ‧ 2018-11-09 22:59:32 檢舉

今天終於弄懂了,在後面加上
aLi[i].onclick = function(){
current = this.index;
oIinfo.innerHTML = '評分' + (current+1);
}
就一切合理了。

14881411 iT邦新手 5 級 ‧ 2018-11-09 23:07:59 檢舉

謝謝你很用心的幫我解惑!

我要發表回答

立即登入回答