toggle edit-Schaltflächen mit den Schaltflächen speichern und Abbrechen

Möchte ich ändern Sie die Schaltfläche, wenn darauf geklickt wird. Ersten es gibt nur einen "Bearbeiten" - button. Nach dem ich es auf, es wird ein "Speichern" - Taste, und ich möchte auch zeigen, eine "Abbrechen" - button daneben.
Wie kann ich das tun? Ich habe den code unten.

    <!DOCTYPE html>
    <html>
    <head>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>demo by roXon</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>

    <body>
    <button data-text="Save">Edit</button>
    <p>Hello</p>
    <p style="display: none">Good Bye</p>

<script>
$("button").click(function(){
    $(this).nextUntil('button').toggle();


    var btnText = $(this).text();
    $(this).text( $(this).data('text') );
    $(this).data('text', btnText );
});
</script>

</body>
</html>
  • Warum gehst du nicht einfach drei buttons mit ids (Bearbeiten, speichern, Abbrechen) und dann ändern Sie Sie nach Bedarf, statt mit Paragraphen und Daten-Funktionen?
  • Hast du ein Beispiel, das ich anschauen kann?
  • ja jsfiddle.net/j08691/JbZnf
  • Gut! Aber was ist, wenn ich habe 3 Gruppen von diesen buttons auf einer Seite? Muss ich Ihnen verschiedene id und schreiben Sie das Skript separat für Sie? Sorry für ein jquery-Neuling...
  • Wie das? jsfiddle.net/j08691/JbZnf/1
  • Es ist fast perfekt! Wie wechseln Sie zu "Bearbeiten" - Modus, wenn ich auf "Speichern" klicken, wie gut? @j08691
  • jsfiddle.net/j08691/JbZnf/2. Willst du mich in diesem post als Antwort?
  • Genial! Bitte tun Sie das!
  • Können Sie mir helfen mit, dass? stackoverflow.com/questions/11526200/switch-content-jquery

InformationsquelleAutor wcdomy | 2012-07-16
  1. 2

    Ich schlage vor, Sie ein layout und jQuery wie diese jsFiddle-Beispiel.

    jQuery

    $('.edit').click(function() {
    $(this).hide();
    $(this).siblings('.save, .cancel').show();
});
$('.cancel').click(function() {
    $(this).siblings('.edit').show();
    $(this).siblings('.save').hide();
    $(this).hide();
});
$('.save').click(function() {
    $(this).siblings('.edit').show();
    $(this).siblings('.cancel').hide();
    $(this).hide();
});

    HTML

    <form>
    <div>
    <input class="edit" type="button" value="Edit" />
    <input class="save" type="button" value="Save" /> 
    <input class="cancel" type="button" value="Cancel" />
    </div>
    <div>
    <input class="edit" type="button" value="Edit" />
    <input class="save" type="button" value="Save" /> 
    <input class="cancel" type="button" value="Cancel" />
    </div>
    <div>
    <input class="edit" type="button" value="Edit" />
    <input class="save" type="button" value="Save" /> 
    <input class="cancel" type="button" value="Cancel" />
    </div>
</form>

    CSS

    .save, .cancel {
display:none;
}​
    • Statt mit $(this) können Sie Zwischenspeichern und verwenden. Dies verbessert die Leistung (oder Sie können Verwendung Veränderung Anlage, $(this).verstecken().Geschwister('.speichern, .Abbrechen').show();
    InformationsquelleAutor j08691
  2. 3

    können Sie fügen Sie eine neue Schaltfläche für das Abbrechen und nur verstecken, wie Sie brauchen.
    Sie können Folgen Sie den demo hier

    hier ist der code, wenn Sie es brauchen:

    <button id='EditSave' data-text="Save">Edit</button>
<button id='Cancel' data-text="Cancel" style="display:none;">Cancel</button>
    <p>Hello</p>
    <p style="display: none">Good Bye</p>​

$("#EditSave").click(function(){
    var btnText = $(this).text();
    if(btnText == 'Edit')
    {
        $(this).text('Save');
        $('#Cancel').show();
    }
    else
    {
        $(this).text('Edit');
        $('#Cancel').hide();
    }
});

$('#Cancel').click(function(){
    $(this).hide();
    $('#EditSave').text('Edit');
});
​
    • Es ist ein guter. Aber was ist, wenn ich mehr als eine Gruppe von Schaltflächen auf der gleichen Seite? Dann habe ich zu geben, die jeweils Unterschied-ID richtig? Gibt es ein einfacher Weg, um das angehen?
    • wenn du mir den html-von dem, was du meinst, ich werde in der Lage sein, um Ihnen zu helfen
    InformationsquelleAutor Nir
Schreibe einen Kommentar