我目前有:
<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 的方式?
最佳答案
您正在调用函数,而不是将它们分配为处理程序。所以你需要先解决这个问题。要根据您当前的方法修复此问题,您调用的每个函数都需要返回一个引用当前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
}
}
关于javascript - 正确访问 <ul> 中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12791309/