Umschalten von text auf dem button-tag

Habe ich eine show ausblenden von Tabellenzeilen, die Funktion würde aber jetzt gerne ändern mein 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 ist wie folgt...

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

Will ich schalten Sie die "Show/Hide" - text. Irgendwelche Ideen?

InformationsquelleAutor MrM | 2010-02-18
  1. 5

    JQuery so etwas funktionieren könnte:

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

    Ich schrieb, dass aus der Spitze von meinem Kopf, obwohl, so müssen Sie möglicherweise einige änderungen, Sie können mehr über die css-jquery api hier. Und alles, was ich Tat, war die Verwendung von anonymen Funktionen

    • Er ist zu Fragen, wie man ändern Sie den text innerhalb des button-Tags.
    • Und wie schwer wäre es zu ändern, meine Antwort dann? Ich habe gerade missread.
    • Sorry, ich glaube nicht, Bearbeiten es für Sie. Trotzdem, downvote zurück genommen.
    InformationsquelleAutor Filip Ekberg
  2. 11
    $('#HideShow').click(function() 
{ 
  if ($(this).text() == "Show") 
  { 
     $(this).text("Hide"); 
  } 
  else 
  { 
     $(this).text("Show"); 
  }; 
});

    Alternative, die .wechseln() hat .Knebel(gerade,ungerade); Funktionalität, verwenden Sie das überhaupt macht am meisten Sinn für Sie, ist etwas kürzeren code, aber vielleicht weniger endgültig.

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

    HINWEIS: Sie können auch andere Aktionen, die Sie wollen, in die Funktion (), wie erforderlich, und können Sie beseitigen die onclick im markup/html, indem Sie Ihre HideClick () - Funktion aufrufen dort. wie ich Ihnen im zweiten Beispiel.

    Als follow-up, und präsentieren eine alternative, könnte man hinzufügen, CSS-Klasse, um Ihre CSS -

    .hideStuff
{
display:none;
}

    DANN fügen Sie diese in:

    .toggle('.hideStuff');

    oder direkt:in der entsprechenden Stelle.

    .addClass('.hideStuff');
.removeClass('.hideStuff');
    InformationsquelleAutor Mark Schultheiss
  3. 1

    Ich würde empfehlen die Verwendung von jquery, aber Sie können nur javascript verwenden, ist 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, ich würde wohl passieren in this statt dem text 'verstecken' in der Funktion nennen. dann yon können, machen Sie es wie zaph0d angegeben. Es ist ein bisschen sauberer dann.

    InformationsquelleAutor nbushnell
  4. 0

    Nicht sicher, warum Sie auf der Durchreise sind thisname in die JS-da dies derzeit nicht immer verwendet.

    Wenn Sie ändern Sie den Aufruf:

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

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

    if (this.value == 'Show') {
  this.value = 'Hide'
}
else {
  this.value = 'Show';
}
    InformationsquelleAutor Paul Hiles
Schreibe einen Kommentar