Question

我遇到了JavaScript循环和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')";

但是，我想知道是否有一种方法可以按类名进行调整，并且仅更改具有某个类名的那些，例如web或徽标。香港专业教育学院尝试了各种方式和循环和事情，但似乎没有工作。 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')";}
    }
}

然而这不起作用，div只是不改变.....我做错了什么？遗漏了什么？或者以完全错误的方式做到这一点？

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

编辑：将“网址”更改为网址，我的不好，这非常愚蠢，但仍无法正常工作。我会尝试发布其他一些想法。谢谢大家到目前为止。

Answer 1

您不需要url周围的引号：

document.getElementById(url)

Answer 2

您正在构建“url”变量，但随后将字符串常量“url”传递到“getElementById（）”函数中。

Answer 3

要仅获取所需类的元素，您需要node.getElementsByClassName('your_class')，其中node可以是document或某些<div>由id选择，或者其他任何节点DOM树。

注意：请记住，以getElement开头的所有方法都将返回单个元素，而带有getElements的方法将返回一个元素数组，因此这个返回一个需要迭代的数组（甚至如果其中只有一个元素）

但是，由于您在JavaScript中使用DOM元素，因此使用jQuery

可以节省大量时间

Answer 4

这可能会有效（如果图片的链接是正确的，并假设id="5"表示id="im5"。请使用它直到它是正确的。检查您的代码，有几个错误（错别字）或者更糟糕的是¹）你的编码：

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 = "5"应该是id ="im5"
i=0; i=5; i++ =＆gt; i=5应为i<5
i=0; i=5; i++创建一个全局变量i。使用var i=0;...
根据您的身份证明，您应该从var i = 1
虽然不是真正的错误，但您不需要使用撇号包围url值
优化调用document.getElementById一次，并将其结果用于代码的其余部分

Answer 5

你有一些问题。首先，您在变量“url”周围有引号，因此它正在查找具有该id的元素，该元素不存在，因此当您尝试访问null查找结果的className时会失败。其次，你的循环从0开始，而不是一个你没有一个id为“im0”的div，所以当你试图获得那个元素的className时它也会失败，这也是不存在的。第三，检查你的循环将i设置为5而不是检查它是否小于或等于5.你的循环因此永远持续，因为5等于 true ，我相信它是不是你想要的。第四，如果为元素分配其他类，则代码可能会中断。最后，大部分此类事情已经为您完成了 - 我建议您考虑使用javascript框架（例如jQuery）和hover（）方法，作为比重新发明轮子更好的选择这不仅仅是一种学习练习。

JS，DOM和循环问题

5 个答案: