Javascript持久性>；逻辑_Javascript_Arrays

Javascript持久性>；逻辑

javascript arrays

Javascript持久性>；逻辑,javascript,arrays,Javascript,Arrays,请帮助我找到一个使用纯“OLJavaScript”的解决方案（我不能使用外部框架）。而且，CSS:hover选择器在实际实现中不起作用已注册事件集发生的某些情况都会调用上次注册的事件数组项 <body> <p>When you hover over <div> tags 0-2, that <div> tag should highlight in red. Why do all of the &a

请帮助我找到一个使用纯“OLJavaScript”的解决方案（我不能使用外部框架）。而且，CSS:hover选择器在实际实现中不起作用

已注册事件集发生的某些情况都会调用上次注册的事件数组项

<body>
        <p>When you hover over &lt;div&gt; tags 0-2, that &lt;div&gt; tag should highlight in red. Why do all of the &lt;div&gt; tags only affect the last &lt;div&gt;?</p>

        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>

        <p>The same results for &lt;p&gt; tags.</p>

        <p class="test"></p>
        <p class="test"></p>
        <p class="test"></p>

        <script type="text/javascript">
            //create arrays
            var divArr = new Array();
            var pArr = new Array();

            //call function to populate arrays
            divArr = getElementsByClassName('div','test');
            pArr = getElementsByClassName('p','test');

            //call function to register arrays elements events
            registerArrayElementsEvents(divArr,'div');
            registerArrayElementsEvents(pArr,'p');

            //retrieve elements that match the passed tag and class
            function getElementsByClassName(myTag,myClass) {
                //load all elements into array
                var elems = document.getElementsByTagName(myTag);
                //create new array placeholder
                var newArr = new Array();

                //iterate through elements array
                for (var i = 0; i < elems.length; i++) {
                    //check to see if element class matches parameter
                    if (elems[i].className == myClass){
                        //add matched element to new array
                        newArr.push(elems[i]);
                    }
                }

                //return array of matched elements
                return newArr;
            }

            //register events to every element in the passed array
            function registerArrayElementsEvents(arr,type){
                //create object placeholder
                var currentObj = new Object();

                //iterate through the objects array
                for (var i = 0; i < arr.length; i++) {
                    //assign current object corresponding to loop counter

                    currentObj = arr[i];

                    //write element index to element
                    currentObj.innerHTML = 'This is &lt;' + type + '&gt; ' + i;

                    //add mouseover event to element
                    addEvent(currentObj,'mouseover',function(){
                        //set current element color to red
                        currentObj.style.color = '#f00'
                    });

                    //add mouseout event to element
                    addEvent(currentObj,'mouseout',function(){
                        //set current element color to black
                        currentObj.style.color = '#000'
                    });
                }
            }

            //register functions to events for objects
            function addEvent(obj,evt,fn){
                //if not IE
                        if (obj.addEventListener)
                    obj.addEventListener(evt,fn,false);
                //if IE
                else if (obj.attachEvent)
                    obj.attachEvent('on'+evt,fn);
            }
        </script>
    </body>


当您将鼠标悬停在div标记0-2上时，该div标记应以红色突出显示。为什么所有的div标签只影响最后一个div
对于p标记，结果相同



//创建数组
var divArr=新数组（）；
var pArr=新数组（）；
//调用函数来填充数组
divArr=getElementsByClassName（'div'，'test'）；
pArr=getElementsByClassName（'p'，'test'）；
//调用函数来注册数组元素事件
RegisterArrayelementEvents（divArr，'div'）；
RegisterArrayelementEvents（pArr，'p'）；
//检索与传递的标记和类匹配的元素
函数getElementsByClassName（myTag，myClass）{
//将所有元素加载到数组中
var elems=document.getElementsByTagName（myTag）；
//创建新的数组占位符
var newArr=新数组（）；
//遍历数组元素
对于（变量i=0；i

发生的事情是，

registerArrayelementEvents

中的

currentObj

范围是

registerArrayelementEvents

而不是每个事件的函数。您需要将

currentObj

放入每个函数的作用域中，以便：

addEvent(currentObj, 'mouseover', (function (obj) {
    return function () { 
        obj.style.color = '#f00';
    };
})(currentObj));

基本上，JavaScript只基于函数，而不是块。这意味着

for (...) { var x = arr[i] }

与以下内容完全相同：

var x;
for (...) {x = arr[i]}

这意味着循环完成后，

被设置为数组的最后一个元素。如果在函数中引用了

，则在循环完成后（如在事件之后），当它转到look

时，它将获得

的最新值。为了克服这个问题，您可以像我一样在每次循环时使用匿名函数创建一个闭包。

发生的事情是，

registerarylementsevents

中的

currentObj

中的

registerarylementsevents

的作用域是

registerarylementsevents

。您需要将

currentObj

放入每个函数的作用域中，以便：

addEvent(currentObj, 'mouseover', (function (obj) {
    return function () { 
        obj.style.color = '#f00';
    };
})(currentObj));

基本上，JavaScript只基于函数，而不是块。这意味着

for (...) { var x = arr[i] }

与以下内容完全相同：

var x;
for (...) {x = arr[i]}

这意味着循环完成后，

被设置为数组的最后一个元素。如果在函数中引用了

，则在循环完成后（如在事件之后），当它转到look

时，它将获得

的最新值。为了克服这个问题，您可以像我一样使用匿名函数在每次循环时创建一个闭包

通过将新值分配给

divArr

和

pArr

可以覆盖最初分配的数组。这不是你的问题，它只是意味着原来的作业是无用的

TIkhon有一个答案，另一个方法是使用

this

避免关闭：

addEvent(currentObj, 'mouseover', function () {
        this.style.color = '#f00';
    });

但是您必须修改

attachEvent

的

addEvent

函数，以便正确设置

此

。我很快会补充一点