1

私は現在持っています：

<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)
   }
}

ただし、現在、結果自体を個別にテストしたときに、ページ上でこれから目に見える応答がまったく得られません(単に画像を反転し、別の配列に基づいてページ上のテキストを変更するだけです)。これにより、要素に間違ってアクセスしていると思われます。HTML と一緒に Javascript を使用するのは初めてなので、重大なエラーが発生した場合はご容赦ください。要素に適切にアクセスしていますか? または、onmouseover/onmouseout を使用してそれらにアクセスする方法は完全に間違っていますか?

4

1 に答える 1

0

関数をハンドラーとして割り当てるのではなく、関数を呼び出しています。したがって、最初にそれを修正する必要があります。現在のアプローチに従って修正するには、呼び出す各関数が現在の値を参照する関数を返す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
   }
}
于 2012-10-09T00:35:09.453 に答える