Cambiar propiedades a un Class

mapers · 3 Diciembre 2013, 17:01 PM

Buenas señores del foro necesito de su ayuda;tengo varios elementos de la siguiente forma:



<a href="AccionesModerador.jsp?AjaxPar= <%=rsPagination.getString("idModeradores")%> &Action=Est&Proc=<%=CambiarEstado%>"  class="CambiarEnlaceModerador"> <%=CambiarEstado%></a>

Todos los elementos tienen la misma class ; ahora mi pregunta es a traves de javascript como puedo cambiar sus propiededes a todos mis elementos, en especifico necesito cambiar a traves de innerHTML que modifique el texto que contenga gracias

#!drvy · 3 Diciembre 2013, 17:39 PM

Ej jQuery seria bastante sencillo gracias a sus selectores. En javascript nativo es un poco mas complicado.

Existe el selector getElementsByClassName pero el soporte en IE empieza desde la versión 9.

Código (javascript) [Seleccionar]

var elementos = document.getElementsByClassName('CambiarEnlaceModerador');
for(var i=0; i<elementos.length; ++i){
   elementos[i].innerHTML = 'Prueba';
}

Existen varias alternativas.. una de ellas es obtener todos los elementos del mismo tag y comparar mediante atributos. Otra asignar a todos los elementos que quieras modificar un ID que solo varia mediante un numero al final.

En el caso de todo por tag.

Código (javascript) [Seleccionar]

var elementos = document.getElementsByTagName('a');
for(var i=0; i<elementos.length; ++i){
   if(elementos[i].getAttribute('class')==='CambiarEnlaceModerador'){
      elementos[i].innerHTML = 'Prueba';
   }
}

El soporte para getElementsByTagName se añade en IE 5.5 así que no deberías tener problema. El problema seria el getAttribute que se incluye en la versión 8... pero la 8 yo creo que es mas que suficiente.

Saludos

EFEX · 3 Diciembre 2013, 18:01 PM

Siguiendo con JQuery como decia drvy

, prodria ser algo asi...

Código (javascript) [Seleccionar]


$(document).ready(function() {
	$('.CambiarEnlaceModerador').html(function(){
		//cambiar los atributos
		$(this).attr('href', 'Nuevadireccion.html');
		$(this).attr('class', 'CambiarClass');
		//cambiar el nombre
		return 'prueba';
	});
});

Y ademas das soporte a versiones mas antiguas de los navegadores.
http://jquery.com/
http://caniuse.com/#feat=getelementsbyclassname

mapers · 3 Diciembre 2013, 22:33 PM

Y si desearia cambiar el mismo atributo pero con la condicion de que <%=CambiarEstado%> tenga identificadores:

Si CambiarEstado=='1' que se escriba 'Prueba1'
Si CambiarEstado=='2' que se escriba 'Prueba2'
......

gracias por su tiempo

EFEX · 3 Diciembre 2013, 23:08 PM

Si entendi bien.. no hace falta condicionales, podes concatenarlo.

Código (javascript) [Seleccionar]

<html>
	<head>
		<!-- <script src="jquery-2.0.3.min.js"></script> -->
		<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.CambiarEnlaceModerador').html(function(){
					//Obtener estado antes de generar cambios
					estado = $(this).text();
					//cambiar los atributos
					$(this).attr('href', 'Nuevadireccion.html');
					$(this).attr('class', 'CambiarClass');
					//cambiar el nombre
					//y concatenamos
					return 'prueba'+estado;
				});
			});
		</script>
		<style type="text/css">
			.CambiarEnlaceModerador{background-color: red;}
			.CambiarClass{background-color: green;}
		</style>
	</head>
	<body>
		<a href="#" class="CambiarEnlaceModerador">1</a>
		<a href="#" class="CambiarEnlaceModerador">2</a>
		<a href="#" class="CambiarEnlaceModerador">3</a>
		<a href="dir.html" class="CambiarEnlaceModerador">4</a>
		<a href="#" class="CambiarEnlaceModerador">5</a>
		<a href="#" class="CambiarEnlaceModerador">6</a>
	</body>
</html>

mapers · 3 Diciembre 2013, 23:17 PM

Estoy implementado esta logica :

Código (javascript) [Seleccionar]


    var elementos = document.getElementsByTagName('a');
    for(var i=0; i<elementos.length; ++i){
      if(elementos[i].getAttribute('class')==='CambiarEnlaceModerador'){
         if (elementos[i].innerHTML === 'Suspender') {
                    elementos[i].innerHTML = 'Play';
                }
                if (elementos[i].innerHTML === 'Activo') {
                    elementos[i].innerHTML = 'Active';
                }
      }
    }

Estaria bien de esa manera colocarlo !!!!!

Test Foro de elhacker.net SMF 2.1

Cambiar propiedades a un Class

mapers

#!drvy

EFEX

mapers

EFEX

mapers