Alternar texto en la etiqueta de botón

Question

Tengo una función de Mostrar filas ocultas de la tabla pero ahora quisiera cambiar mi texto.

<script language="javascript" type="text/javascript"> 

function HideStuff(thisname) { 
    tr = document.getElementsByTagName('tr');   
    for (i = 0; i < tr.length; i++) { 
     if (tr[i].getAttribute('classname') == 'display:none;') { 
      if (tr[i].style.display == 'none' || tr[i].style.display=='block') { 
       tr[i].style.display = ''; 
      } 
      else { 
       tr[i].style.display = 'block'; 
      } 
     } 
    } 
} 

El HTML es el siguiente ...

<button id="ShowHide" onclick="HideStuff('hide');>Show/Hide</button> 

Quiero cambiar el texto "Mostrar/Ocultar". ¿Algunas ideas?

Answer 1

Uso jQuery algo como esto podría funcionar:

$('ShowHide').click(function(){ 
    if ($('hide').css('display') == 'block') 
     $('ShowHide').val("Hide"); 
    else 
     $('ShowHide').val("Show"); 
}); 

acabo de escribieron que desde lo alto de la cabeza, aunque, por lo que es posible que tenga que hacer algunos cambios, puede leer más sobre el css jquery api here. Y todo lo que hice fue usar funciones anónimas

Answer 2

No estoy seguro de por qué está pasando este nombre al JS ya que actualmente no se está usando.

Si cambia la llamada a:

<button id="ShowHide" onclick="HideStuff(this)">Show</button> 

y luego en el js puede cambiar el texto con bastante facilidad:

if (this.value == 'Show') { 
    this.value = 'Hide' 
} 
else { 
    this.value = 'Show'; 
} 

Answer 3

Yo recomendaría el uso de jQuery, pero sólo puede utilizar JavaScript de document.getElementById método

en su función:

Aunque, probablemente pasaría en this en lugar del texto 'ocultar' en la llamada a la función. entonces yon puedes hacerlo como dijo zaph0d. Es un poco más limpio entonces.

Answer 4

$('#HideShow').click(function() 
{ 
    if ($(this).text() == "Show") 
    { 
    $(this).text("Hide"); 
    } 
    else 
    { 
    $(this).text("Show"); 
    }; 
}); 

Alternativa, la .toggle() tiene un .toggle (par, impar); funcionalidad, uso que tenga más sentido para usted, uno es un código un poco más corto pero quizás menos definitivo.

$('#HideShow').toggle(function() 
    { 
    $(this).text("Hide"); 
    HideClick('hide'); 
    }, 
    function() 
    { 
    $(this).text("Show"); 
    HideClick('hide'); 
    } 
); 

NOTA: puede incluir cualquier otra acción que desee en la función(), según sea necesario, y se puede eliminar el onclick en el marcado/html llamando a su HideClick) llamada de función (en ese país. como lo demuestro en el segundo ejemplo.

Como seguimiento, y para presentar una alternativa, puede agregar la clase CSS a la CSS

.hideStuff 
{ 
display:none; 
} 

añadir entonces esta en:

.toggle('.hideStuff'); 

o, de manera más directa: en el lugar apropiado.

.addClass('.hideStuff'); 
.removeClass('.hideStuff');