Tengo un problema con el bucle de JavaScript y DOM.

Así que tengo algunos div, cada uno tiene una imagen de fondo definida por CSS, sin embargo, cuando vuelco un enlace de texto, deseo que cambien estas imágenes de fondo, cuáles cambiarán dependiendo de su nombre de clase y el enlace sobrepasado con el mouse

<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>

Así que esos son los divs con mi enlace para pasar el mouse. entonces para cambiar estas imágenes tengo un JavaScript simple, que funciona bien (si es muy largo) ...

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

Sin embargo, me preguntaba si habría una forma en que condicionaría por nombre de clase, y solo cambiaría aquellos con un cierto nombre de clase, por ejemplo, web o logotipo. He intentado varias formas, bucles y cosas, pero ninguna parecía funcionar. p.ej

    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')";}
    }
}

Sin embargo esto no funciona, los divs simplemente no cambian ... ¿estoy haciendo algo mal? ¿Echando de menos algo? o hacerlo de la manera completamente incorrecta?

Toda ayuda apreciada, gracias de antemano.

Editar: cambió la "url" a url, por desgracia, fue muy tonto, sin embargo, aún no funcionó. Intentaré algunas otras ideas publicadas. Gracias a todos hasta ahora.

1
ben 5 jun. 2011 a las 17:17

4 respuestas

Está creando la variable "url", pero luego pasa la constante de cadena "url" a la función "getElementById ()".

0
Pointy 5 jun. 2011 a las 13:23

Tienes algunos problemas. Primero, tiene comillas alrededor de la variable "url", por lo que busca un elemento con esa identificación, que no existe y, por lo tanto, falla cuando intenta acceder al className de un resultado de búsqueda nulo. En segundo lugar, su ciclo comienza en 0, no en uno y no tiene un div con id "im0", por lo que fallará de todos modos cuando intente obtener el className de ese elemento, que tampoco existe. En tercer lugar, la verificación en su ciclo establece i en 5 en lugar de verificar si es menor o igual a 5. Su ciclo continuará así para siempre, ya que 5 equivale a verdadero , lo que estoy seguro es No es lo que quieres. Cuarto, su código puede romperse si asigna clases adicionales a los elementos. Por último, la mayoría de este tipo de cosas ya se han hecho por usted, podría sugerirle que busque usar un marco de JavaScript, como jQuery, con el método hover (), como una mejor alternativa que reinventar la rueda si Esto no es puramente un ejercicio de aprendizaje.

0
tvanfosson 5 jun. 2011 a las 13:31

Para obtener solo elementos de la clase deseada, necesita node.getElementsByClassName('your_class'), donde node puede ser document o algunos <div> seleccionados por id, o cualquier otro nodo del árbol DOM.

Nota: Recuerde que todos los métodos que comienzan con getElement devolverán un solo elemento, y aquellos con getElements devolverán una matriz de elementos, por lo que este devuelve una matriz que necesita iterar (incluso si hay solo un elemento en él)

Sin embargo, dado que está trabajando con elementos DOM en JavaScript, ahorraría toneladas de tiempo usando jQuery

0
mkilmanas 5 jun. 2011 a las 13:24

No necesita las comillas alrededor de url:

document.getElementById(url)
1
Andrew Cooper 5 jun. 2011 a las 13:23