个人中心
gpt4 book ai didi

Javascript持久化>逻辑

转载 作者：行者123 更新时间：2023-11-28 16:31:17 25 4
gpt4 key购买 nike

请帮我找到一个使用普通 'ol javascript 的解决方案(我无法使用外部框架)。此外，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>

最佳答案

发生的情况是，registerArrayElementsEvents 中的 currentObj 的作用域是 registerArrayElementsEvents 而不是每个事件的函数。您需要将 currentObj 放入每个函数的作用域中，如下所示:

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

基本上，JavaScript 的作用域仅基于函数，而不是基于 block 。这意味着

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

与以下内容完全相同:

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

这意味着循环完成后，x 设置为数组的最后一个元素。如果您在函数中引用了 x，则当循环完成后(例如在事件之后)查找 x 时，它会获取 x< 的最新值。为了克服这个问题，您可以像我一样使用匿名函数在每次循环时创建一个闭包。

关于Javascript持久化>逻辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5875333/

25 4 0
文章推荐： javascript - 样式表 javascript 对象非常奇怪的 IE 崩溃问题
文章推荐： javascript - 我怎样才能让这个 jQuery 在 IE 浏览器中工作？
文章推荐： Javascript自动改变字符串
文章推荐： javascript - 如何使用 JavaScript 将事件属性添加到 html 标签
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com