用户单击链接问题时显示css背景图像

时间:2010-06-04 20:28:51

标签: javascript css object onclick background-image

我更新了我的帖子。现在它说“链接未定义”“thisLink [link] .scopeObject = new Image();”链接仍然很重要,因为它是linkObj的一个属性,它保存当前链接。由于它提供的循环能力,我使用[]作为属性而不是点符号。

<script type="text/javascript">
window.onload = init;
var linkObj = new Object();
var listItems = new Object();

function init() {
for(var i=0; i < document.links.length; i++) {
    var link = document.links[i];
    linkObj[link] = link;
    setupClick(linkObj);
}
}

function setupClick(thisLink) {
thisLink[link].scopeObject = new Image();
thisLink[link].scopeObject.src = thisLink[link].id + "Img.png";
thisLink[link].onclick = rollClick; 
}

function rollClick() {
var list = document.getElementById("target").childNodes;
for(var i=0; i < list.length; i++) {
    if(list[i].nodeName == "LI") {
        var id = list[i] + i;
        listItems[id] = id;
    }
}
for(id in listItems){
        if(listItems[id].indexOf(this[link].id) > -1) {
        listItem[id].style.backgroundImage =  this[link].scopeObject.src; 
}
}
}
</script>


<ul id="target">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>   
</div>
<div id="mainContent">
<div id="navLinks">
<ul>
    <li><a href="#" id="0">Home</a></li>
    <li><a href="#" id="1">About</a></li>
    <li><a href="#" id="2">Products</a></li>
    <li><a href="#" id="3">Contact</a></li>
</ul>   

1 个答案:

答案 0 :(得分:1)

我认为麻烦在于这一行:var linkObj[link] = document.links[i];。您需要删除该行前面的var命令。我假设您的linkObj已在代码中的其他位置声明,并且您尝试在其中插入新值。如果没有,请发布更完整的代码,我可以进一步了解它。

- 以下编辑 -

然后我的声明“我认为你在其他地方定义了linkObj”。是不正确的。您可能需要改为:var linkObj = document.links[i];。 var命令创建变量。一旦创建它们,赋值不需要var命令。您是否尝试保留一个引用所有链接的对象以供日后使用,或者您是否只需要使用每个链接一次?如果前者在init()函数之外添加以下行:var linkObj = {};

- 更多编辑 -

圣牛。我不是100%确定你的最终目的是什么,但我认为你应该首先使用这样的东西:

<script type="text/javascript">
  window.onload = init;

  function init() {
    for (var i = 0; i < document.links.length; ++i) {
      setupClick(document.links[i]);
    }
  }

  function setupClick(thisLink) {
    thisLink.scopeObject = new Image();
    thisLink.scopeObject.src = thisLink[link].id + "Img.png";
    thisLink.onclick = rollClick; 
  }
</script>

这将使您达到至少为document.links数组中存在的链接分配属性的程度。你的rollClick函数所需的行为对我来说有点模糊,但至少使用它来开始为你的页面中的链接分配属性。