Toggle-Text auf Button-Tag

Question

Ich habe eine Show ausblenden Tabellenzeilen-Funktion, aber würde jetzt gerne meinen Text ändern.

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

Die HTML ist wie folgt ...

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

Ich möchte die "Show/Hide" Text wechseln. Irgendwelche Ideen?

Answer 1

Verwenden jQuery so etwas wie dies funktionieren könnte:

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

Ich schrieb, dass, obwohl von der Oberseite meines Kopfes, so müssen Sie möglicherweise einige Änderungen tun, werden Sie mehr über die css jquery api here lesen kann. Und alles, was ich tat, war mit anonymen Funktionen

Answer 2

Nicht sicher, warum Sie diesen Namen in die JS übergeben, wie dies derzeit nicht verwendet wird.

Wenn Sie den Anruf zu ändern:

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

und dann in der js können Sie den Text ziemlich leicht ändern:

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

Answer 3

würde ich mit Jquery empfehlen, aber man kann nur von JavaScript verwenden document.getElementById Methode

in Ihrer Funktion:

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 = 'none'; 

      } 
      else { 
       tr[i].style.display = 'block'; 

      } 
     } 
    } 
    if (document.getElementById("ShowHide").value == "show") { 
     document.getElementById("ShowHide").value = "hide"; 
    } 
    else { 
     document.getElementById("ShowHide").value = "show"; 
    } 

} 

Obwohl, würde ich wahrscheinlich this anstelle des Textes 'Verbergen' im Funktionsaufruf übergeben. dann kann man es tun wie Zaph0d angegeben. Es ist dann ein bisschen sauberer.

Answer 4

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

Alternativ hat die .toggle() eine .toggle (gerade, ungerade); Funktionalität, Verwendung, die Ihnen am meisten Sinn macht, ist ein etwas kürzerer Code, aber vielleicht weniger definitiv.

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

HINWEIS: Sie irgendwelche anderen Aktionen umfassen können Sie in der Funktion wollen() je nach Bedarf, und Sie können telefonisch bei Ihrer Verbergen() Funktionsaufruf dort die Onclick im Markup/html beseitigen. wie ich im zweiten Beispiel demonstriere.

.toggle('.hideStuff'); 

oder direkter: in der

Als Follow-up, und eine Alternative zu präsentieren, können Sie CSS-Klasse zu Ihrem CSS

.hideStuff 
{ 
display:none; 
} 

Dann fügen Sie diese in hinzufügen geeigneter Ort.

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