Question

我目前有：

<div id="thumbImages">
        <ul>
            <li><img src="thumbimages/test1.jpg" alt="thumb1" width="125" height="100" /></li>
            <li><img src="thumbimages/test2.jpg" alt="thumb2" width="125" height="100" /></li>
            <li><img src="thumbimages/test3.jpg" alt="thumb3" width="125" height="100" /></li>
            <li><img src="thumbimages/test4.jpg" alt="thumb4" width="125" height="100" /></li>
        </ul>
    </div>

在我的HTML

中

我尝试使用此javascript

向缩略图添加按钮功能

var isMousedOver = [
false,
false,
false,
false
];

function init()
{
   DoStuffWithThumbs();
}

this.onload = init();

function DoStuffWithThumbs()
{
   var thumbs = document.getElementById("thumbImages");
   var itemsUL = thumbs.getElementsByTagName("ul");
   var itemsLI = itemsUL.item(0).getElementsByTagName("li");
   for (var i = 0; i < itemsLI.length; ++i)
   { 
      var curThumb = itemsLI[i];
      curThumb.onclick = DoStuff(i);
      curThumb.onmouseover = MouseOver(i);
      curThumb.onmouseout = MouseOut(i);
   }
}

function MouseOver(val)
{
   isMousedOver[val] = true;
}

function MouseOut(val)
{
   isMousedOver[val] = false;
}

function DoStuff(val)
{
   if(isMousedOver[val] == true)
   {
       //stuff is done here ( I know the stuff in question is working)
   }
}

然而，当我单独测试结果本身（简单地翻转图像并根据另一个数组更改页面上的某些文本）时，目前我在页面上根本没有得到任何可见的响应。这让我相信我错误地访问了元素。我是新手使用Javascript和html，所以请原谅我，如果我犯了一些严重的错误。我是否正确访问了我的元素？或者这是完全错误的方式去访问/使用onmouseover / onmouseout？

Answer 1

您正在调用函数，而不是将它们指定为处理程序。所以你需要先修复它。要根据您当前的方法修复它，您调用的每个函数都需要返回一个引用当前i值的函数。

但是，不是在数组中跟踪鼠标悬停状态，而是通过添加属性在DOM元素本身上跟踪它更简单。

function DoStuffWithThumbs() {
   var thumbs = document.getElementById("thumbImages"),
       itemsUL = thumbs.getElementsByTagName("ul"),
       itemsLI = itemsUL.item(0).getElementsByTagName("li");

   for (var i = 0; i < itemsLI.length; ++i) { 
      itemsLI[i].onclick = DoStuff;
      itemsLI[i].onmouseover = MouseOver;
      itemsLI[i].onmouseout = MouseOut;
   }
}

function MouseOver(val) {
   this._over = true;
}

function MouseOut(val) {
   this._over = false;
}

function DoStuff(val) {
   if(this._over === true) {
       // do your stuff
   }
}

正确访问<ul> </ul>中的图像

1 个答案: