Prepínať text na tagu tlačidla - javascript, jquery

Mám show schovať riadok tabuľky funkciu, ale teraz by som chcel zmeniť svoj text.

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

Html je nasledovné ...

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

Chcem prepnúť text "Zobraziť / Skryť". Nejaké nápady?

odpovede:

5 pre odpoveď č. 1

Použiť jQuery môže niečo také fungovať:

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

Práve som to napísal z vrcholu mojej hlavy, takže možno budete musieť urobiť nejaké zmeny, môžete si prečítať viac o css jquery api tu, A všetko, čo som urobil, bolo pomocou anonymných funkcií

---

11 pre odpoveď č. 2

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

Alternatívne .toggle () má .toggle (párne, nepárne); funkčnosť, používanie, ktoré vám niekedy najviac rozumie, jeden je mierne kratší kód, ale možno menej definitívny.

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

POZNÁMKA: môžete zahrnúť akékoľvek ďalšie akcie, ktoré chcete vo funkcii (), podľa potreby a môžete eliminovať onclick v markup / html tým, že volať na svoje funkcie HideClick (). ako ukazujem v druhom príklade.

Ako následný krok a predstaviť alternatívu, môžete pridať triedu CSS do svojho CSS

.hideStuff
{
display:none;
}

Potom pridajte toto:

.toggle(".hideStuff");

alebo priamo: na vhodnom mieste.

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

---

1 pre odpoveď č. 3

Odporúčam používať jquery, ale stačí použiť javascript document.getElementById metóda

vo vašej funkcii:

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

}

Hoci by som asi vstúpil this namiesto textu "skryť" vo funkčnom volaní. potom yon môže urobiť to ako zaph0d uvedené. Je to trochu čistejšie.

---

0 pre odpoveď č. 4

Nie ste si istí, prečo ste tento názov preniesli do JS, pretože to momentálne nie je zvyknutý.

Ak zmeníte hovor:

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

a potom v js môžete zmeniť text pomerne ľahko:

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

---