2012-10-09 45 views
6

Básicamente estoy tratando de encontrar todos los elementos con un nombre de clase particular y cambiarlo a otro. Tengo otra función que lo cambia al nombre de clase original. Aquí está mi función que se activa con un onclick:Cambiar la clase css para todos los elementos con dicha clase con Javascript

function showEventsAppliedTo() { 
    var myObj = document.getElementsByClassName('notApplied'); 
    while (myObj.length >= 0) { 
     myObj[0].className = 'mblListItem notAppliedOut'; 
    } 
    AppliedToButton.set('style', 'display:none;'); 
    EventListingButton.set('style', 'display:block;'); 
} 

Recibo un error que dice myObj [0] no está definido. ¿Alguna idea de por qué está pasando esto?

Como nota, estamos utilizando Dojo, de ahí la última línea de la función. Sé que podría hacer esto fácilmente con jQuery, pero no lo estamos usando y no tiene sentido cargar otro marco.

Gracias de antemano por su ayuda.

EDITAR

Gracias a la ayuda de Abhishek Mishra, que modifican la forma en que estoy manipulación de este bucle y encontraron una manera de hacerlo con sólo ir de discotecas, que es lo que se prefiere. Aquí está el código:

function listingClassToggle() { 
    dojo.query(".notApplied").addClass("notAppliedOut"); 
    dojo.query(".notApplied").removeClass("notApplied"); 
} 

código mucho más simple y mucho más ligero que mi solución anterior. Gracias por toda tu ayuda. Espero que esto ayude a alguien más.

+0

Puede buclear sobre myObj usando el dojo 'forEach', entonces no necesitará verificar ceros. http://dojotoolkit.org/reference-guide/1.7/dojo/forEach.html. También 'dojo.query' para consultas basadas en css, que sería' dojo.query ('.noApplied'); ' –

+0

Me pregunto si eso se ejecutará más rápido que el método que estoy usando? La respuesta a continuación lo solucionó, pero también voy a analizar este método. Ese método de consulta podría ser mejor que getelement – chazthetic

+0

Creo que la 'query' de dojo sería más compatible en todos los navegadores. 'getElementsByClassName' es bueno, pero no funciona en IE 7 y 8;) http://caniuse.com/#search=getElementsByClassName –

Respuesta

5

Debe solo realizar una prueba para > 0 no >= 0. Cuando la longitud es igual a cero, no hay elemento cero.

+0

Oh sí, esto es todo. '0' significa que no quedan elementos! :-) Estaba pensando 'while (myObj [0]) {...' –

+0

Eso explicaría por qué parecía que la función estaba haciendo todo correctamente y arrojó un error al final. Eso lo hizo, gracias! – chazthetic

+0

Consulte mi edición anterior para ver cómo hacerlo con solo la funcionalidad Dojo en lugar de ejecutar una declaración 'while' – chazthetic

Cuestiones relacionadas