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