使用Mouseenter / MouseLeave更改JavaScript中的Div

Question

我正在嘗試使用數組索引來允許一組div ID在觸發mouseenter和mouseleave函數時從一個ID更改為另一個ID。

我知道還有其他方法可以執行此操作-切換，懸停或CSS懸停。 這只是對我的學習，我很新。

注釋了下面的代碼，基本問題與為什么“ largeID”（或smallID）的數組變量輸出正確的值有關，但是嘗試使用索引值卻沒有。 對於每個for語句，我希望在鼠標進入div時將smallID [i]值替換為largeID [i]值，但是我不想為每個代碼編寫代碼，即“ largeID [1]” ，largeID [2]。

感謝您的指導！！

$(document).ready(function() {

    var smallID = [];
    var largeID = [];

    var divList = document.getElementsByTagName('div')[1]; //get the second (radialMenu) div in the document
    var radialDivList = divList.getElementsByTagName('div'); // get all divs under the second (radialMenu) div

    for(var i = 0; i < radialDivList.length; i++) {
        if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements
        if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties
        smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array;
        largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element

        alert(smallID[i]); // alerts for smallID / largeID and smallID[i] / largeID[i]
        alert(largeID[i]); // give rational and expected output

        $('#' + smallID[i]).mouseenter(function () { //works for all four radial menu divs when mouse enters
            //BUT largeID[i] is undefined
            alert(largeID[i]); // undefined
            alert(largeID); // gives expected output of full array
        }).mouseleave(function () { //mouseleave function not working

        });

    }

Answer 1

在mouseenter函數中未定義largeID [i]的原因是，i的最后一個值會被記住並用於mouseenter事件。

當您使用變量並且它超出“范圍”時，將自動創建一個閉包，以允許仍需要該變量的函數使用該變量，並且mouseenter函數都引用同一變量。

當我大於使用radialDivList.length的div數量時，for循環停止。 現在，每次使用i來引用數組中索引的嘗試都將超出范圍。

此頁面上的第一個答案很好地說明了這一點：循環內的JavaScript閉合–簡單的實際示例

我已經修改了您的示例，以使用其自己的“ i”副本創建一個新函數。 因此，當將鼠標懸停在第一個div上時，i將等於0；當將鼠標懸停在第二個div上時，i將等於1，以此類推。

 $(document).ready(function() { var smallID = []; var largeID = []; var divList = document.getElementsByTagName('div')[1]; //get the second (radialMenu) div in the document var radialDivList = divList.getElementsByTagName('div'); // get all divs under the second (radialMenu) div var funcs = []; for (var i = 0; i < radialDivList.length; i++) { if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array; largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element alert(smallID[i]); // alerts for smallID / largeID and smallID[i] / largeID[i] alert(largeID[i]); // give rational and expected output funcs[i] = function(i) { $('#' + smallID[i]).mouseenter(function() { //works for all four radial menu divs when mouse enters //BUT largeID[i] is undefined alert(largeID[i]); // undefined alert(largeID); // gives expected output of full array }).mouseleave(function() { //mouseleave function not working }); }.bind(this, i); } for (var i = 0; i < funcs.length; i++) { funcs[i](); } });

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Example</title> </head> <body> <div> <div> <div id="one" style="background:green;height:40px"> </div> <div id="two" style="background:red;height:40px"> </div> <div id="three" style="background:blue;height:40px"> </div> </div> </div> </body> </html>

使用Mouseenter / MouseLeave更改JavaScript中的Div

問題描述

1 個解決方案

解決方案1
0 已采納 2016-01-04 02:22:08

使用Mouseenter / MouseLeave更改JavaScript中的Div

問題描述

1 個解決方案

解決方案1 0 已采納 2016-01-04 02:22:08

解決方案1
0 已采納 2016-01-04 02:22:08