[英]properly accessing images within a <ul>
我目前有:
<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和HTML的Javascript,所以如果我犯了一些嚴重的錯誤,請原諒我。 我是否可以正確訪問元素? 還是這完全是錯誤的方式來訪問它們/使用onmouseover / onmouseout?
您正在調用函數,而不是將其分配為處理程序。 因此,您需要先解決該問題。 要根據您當前的方法進行修復,您調用的每個函數都需要返回一個引用當前i
值的函數。
但是,與其在Array中跟蹤鼠標懸停狀態,不如通過添加屬性在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
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.