Schaltet den Text auf dem Button-Tag um - Javascript, Jquery

Ich habe eine Funktion zum Anzeigen von Tabellenzeilen, möchte aber jetzt 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 den Text "Anzeigen / Verbergen" umschalten. Irgendwelche Ideen?

Antworten:

5 für die Antwort № 1

Verwenden Sie jQuery, so etwas könnte funktionieren:

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

Ich habe das nur von oben geschrieben, so dass Sie einige Änderungen vornehmen müssen. Lesen Sie mehr über das css jquery api hier. Und alles, was ich tat, war die Verwendung anonymer Funktionen

---

11 für die Antwort № 2

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

Alternativ hat das .toggle () ein .toggle (gerade, ungerade); Funktionalität, verwenden, was für Sie am sinnvollsten ist, 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 können beliebige weitere Aktionen in die Funktion () einfügen, und Sie können den Onclick in der Markup / HTML-Datei entfernen, indem Sie dort den Aufruf der Funktion HideClick () aufrufen. wie ich im zweiten Beispiel demonstriere.

Als Folgemaßnahme und als Alternative können Sie Ihrem CSS eine CSS-Klasse hinzufügen

.hideStuff
{
display:none;
}

DANN füge dies hinzu:

.toggle(".hideStuff");

oder direkter: an der entsprechenden Stelle.

.addClass(".hideStuff");
.removeClass(".hideStuff");

---

1 für die Antwort № 3

Ich würde empfehlen, jquery zu verwenden, aber Sie können einfach Javascript verwenden document.getElementById Methode

in deiner 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 ich wahrscheinlich vorbeigehen würde this statt des Textes "hide" im Funktionsaufruf. dann können Sie es tun, wie zaph0d gesagt hat. Es ist ein bisschen sauberer.

---

0 für die Antwort № 4

Sie sind sich nicht sicher, warum Sie diesen Namen an die JS weitergeben, da dies derzeit nicht verwendet wird.

Wenn Sie den Anruf ändern in:

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

und dann in den js kannst du den Text ziemlich leicht ändern:

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

---