请帮我找到一个使用普通 'ol javascript 的解决方案(我无法使用外部框架)。此外，CSS :hover 选择器不适用于现实世界的实现。
注册事件发生的事情设置所有调用最后注册事件数组项。
<body>
<p>When you hover over <div> tags 0-2, that <div> tag should highlight in red. Why do all of the <div> tags only affect the last <div>?</p>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<p>The same results for <p> 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 <' + type + '> ' + 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/