问题与JS，DOM和循环

我有一个JavaScript循环和DOM的问题。问题与JS，DOM和循环

所以我有几个div，每个都有CSS定义的背景图像，但是当我翻转文本链接时，我希望这些背景图像发生变化，哪些会根据它们的类名和链接鼠标悬停进行更改“编

<div id="im1" class="web"></div> 
     <div id="im2" class="logo"></div> 
     <div id="im3" class="web"></div> 
     <div id="im4" class="logo"></div> 
     <div id="5" class="logo"></div>

<a href="#" onmouseover="showweb()" onmouseout="hideweb()">web</a>

所以这些都是我的链接，鼠标的div。然后更改这些图片，我有一些简单的JavaScript，但它工作正常（如果很长）....

function showweb() { 
document.getElementById("im1").style.backgroundImage = "url('back/1col.png')"; 
document.getElementById("im2").style.backgroundImage = "url('back/2col.png')";

，我想知道是否有一种方法，我会用类名状态，唯一的变化那些具有特定类名的人，例如网页或徽标。我试过各种各样的方式和循环，但都没有奏效。 e.g

function showweb() { 
for(i=0; i=5; i++){ 
    url = "im" + i; 
    if(document.getElementById("url").className=="web"){ 
    document.getElementById("url").style.backgroundImage = "url('back/"+ i +"col.png')";} 
    } 
}

然而，这并不工作，只是申报单不改变.....我做错了什么？遗漏了什么？或者完全错误的方式？

所有帮助表示感谢，提前感谢。

编辑：改变了“网址”为网址，我的坏，这是非常愚蠢的，但仍然没有工作。我会尝试发布其他一些想法。感谢所有人。

来源

2011-06-05 ben

总是添加一些'alert（）'来看看发生了什么 – 2011-06-05 13:23:41

这可能工作（如果链接到你的图片是正确的，假定通过id="5"你的意思是节省大量的时间id="im5"。一起玩，直到它是正确的。检查你的代码thourougly，有你的编码几个错误（拼写错误或更糟）：对

id = "5"按理说应该是

function showweb() { 
for(var i=1; i < 6; i++){ 
    var el = document.getElementById("im"+(i)); 
    if(el && /web/.test((el ||{}).className)){ 
     el.style.backgroundImage = "url(back/"+ i +"col.png)";} 
    } 
}

几个音符id ="im5"

i=0; i=5; i++ =>i=5应该是i<5
i=0; i=5; i++创建一个全局变量i。使用var i=0;...
给你的ID，你应该var i = 1
开始虽然不是一个真正的错误，你不需要包围撇号的URL值
优化呼叫document.getElementById一次，并使用它的结果在休息的代码

来源

2011-06-05 13:29:00 KooiInc

ahaa，这个工程。非常感谢！所以说这个功能是如果我对“网络”溺爱，如果我对“logo”进行挖掘，该怎么办？新功能或者这是否容易改变？ ive从未见过。测试前 – ben 2011-06-05 13:36:16

嗨本，'test'是'RegExp'的一种方法（正则表达式，请参阅http://www.javascriptkit.com/jsref/regexp.shtml）。如果正则表达式匹配，则返回true，否则返回false。您可以将'RegExp'文字更改为'/ logo /'，或者如果您希望它为* web *或* logo *为'/ web | logo /'，或者使用'else if（/logo/.test（。 ..））'。 – KooiInc 2011-06-05 13:47:40

您不需要引号url：

document.getElementById(url)

来源

2011-06-05 13:23:28

你正在构建的“网址”变量，但你传递字符串常量“URL”进入“的getElementById（）”功能。

来源

2011-06-05 13:23:37 Pointy

，以获得所需类的唯一要素，你需要node.getElementsByClassName('your_class')，其中node可以document或一些<div>由标识选择，或在DOM树的任何其他节点。注意：请记住，所有以getElement开头的方法都会返回单个元素，而那些使用getElements的元素将返回一个元素数组，因此这个返回一个需要迭代的数组（即使只有一个元素在其中它）

但是，因为你是在JavaScript中的DOM元素的工作，你会用jQuery

来源

2011-06-05 13:24:52 mkilmanas

这是真的，但IE9之前版本不支持“getElementsByClassName（）”。 – Pointy 2011-06-05 13:27:32

好吧，把它添加到为什么IE是（是？）邪恶的列表:)无论如何，jQuery是你的朋友 - 它的工作跨平台/浏览器，所以你甚至不会注意到这个故障，因为有人已经照顾这个为你。感谢一个很好的提示@Pointy – mkilmanas 2011-06-05 16:05:09

你有几个问题。首先，你需要引用变量“url”的引号，以便查找具有该id的元素，该元素不存在，因此在尝试访问null查找结果的className时失败。其次，你的循环从0开始，而不是一个，你没有一个id为“im0”的div，所以当你尝试获取该元素的className时，它也会失败，这也不存在。第三，检查你的循环设置我为5而不是检查它是否小于或等于5.你的循环因此继续永远，因为5相当于真，我敢肯定这不是你想要的。第四，如果您为元素分配额外的类，则代码可能会中断。最后，大部分这类事情已经为你完成了 - 可能我建议你考虑使用JavaScript框架，比如jQuery，使用hover（）方法作为比重新创建轮子更好的替代方法if这不是单纯的学习练习。

来源

2011-06-05 13:31:08 tvanfosson

问题与JS，DOM和循环

回答

相关问题