dedlfix: Div ein und ausblenden

Beitrag lesen

Tach!

Habe ich eingesetzt:

$(".fa-plus").click(function(){
	$(".insert_erinnerung").slideToggle();
	$("span").removeClass("fa fa-plus"); 
	$("span").addClass("fa fa-minus-square"); 
}); 

So eher nicht. Dein $('span') selektiert sämtliche span-Elemente. Für den Moment mag das passend sein, aber das wird bestimmt nicht das einzige span im gesamten Dokument bleiben. DU musst bei den Selektoren so spezifisch sein wie beim CSS. Einzelne Elemente lassen sich besser über einen id-Selektor ansprechen. Wenn du ein solches als Rahmen-Element hat (vielleicht das h3), dann kannst du mit .find('span') die Kinder mit wählen und muss nicht mit $(...) wieder das gesamte DOM absuchen.

Also

<h3 id='toggleReminder'>...</h3>
var $toggleReminder = $('#toggleReminder');
$toggleReminder.click(...);
$toggleReminder.find('span').toggleClass(...);

Vorausgesetzt, das span ist das einzige innerhalb des #toggleReminder.

Wäre es möglich, wenn ich das wieder zuklappen lasse, dass dann das Icon wieder gewechselt wird, also auf den Ausgangspunkt?

Ja, dann wie schon vorgeschlagen toggleClass(). Aber auch nur fa-plus und fa-minus-square, das fa kann unangetastet bleiben.

Und die letzte Frage, kann ich den Text:

<h3><span class="fa fa-plus"></span> Erinnerung hinzufügen</h3>

ebenfalls ändern lassen?

Ja, aber jQuery kann den Textnode nicht ansprechen. Ein .text('...') auf dem h3 wirft das span weg. Also noch ein span mit Klasse oder Id um den Text zum gezielten Ansprechen, und das Icon-Span muss auch spezifischer ansprechbar sein / angesprochen werden. Also in dem oberen Beispiel nicht .find('span') sondern .find('.fa') oder .find('span.fa') oder du gibst dem noch eine Klasse icon und dann .find('.icon'). Der Möglichkeiten gibt es viele.

dedlfix.

0 48

Div ein und ausblenden

Jnnbo
  • jquery
  1. 0
    dedlfix
    1. 0
      Jnnbo
      1. 0
        dedlfix
    2. 0
      Gunnar Bittersmann
  2. 0
    Gunnar Bittersmann
    • barrierefreiheit
    • jquery
    1. 0
      Gunnar Bittersmann
      1. 0
        Jnnbo
        1. 0
          Gunnar Bittersmann
          1. 0
            Jnnbo
            1. 0
              Gunnar Bittersmann
              • jquery
    2. 0
      Jnnbo
      1. 1
        Gunnar Bittersmann
        1. 0
          Jnnbo
          1. 0
            dedlfix
            1. 0
              Jnnbo
              1. 0
                dedlfix
                1. 0
                  Jnnbo
                  1. 0
                    Jnnbo
                    1. 0

                      Zusatzfrage

                      Jnnbo
                      • jquery
                      1. 0
                        dedlfix
                        1. 0
                          Jnnbo
                          1. 0
                            Jnnbo
                            1. 0

                              attr

                              Jnnbo
                              1. 0
                                Jnnbo
                                1. 0

                                  Zweite Function wird nicht ausgeführt

                                  Jnnbo
                                  1. 0
                                    Gunnar Bittersmann
                                    1. 0
                                      Jnnbo
                                      1. 0
                                        Gunnar Bittersmann
                                        1. 0
                                          Jnnbo
                                          1. 0

                                            Eine Lösung?

                                            Jnnbo
                                            1. 0
                                              dedlfix
                                              1. 0
                                                Jnnbo
                                                1. 0
                                                  Gunnar Bittersmann
                                                  1. 0
                                                    Jnnbo
                                                  2. 0
                                                    robertroth
                                                  3. 0
                                                    dedlfix
                                                2. 0
                                                  dedlfix
                                                  1. 0
                                                    Jnnbo
                                                    1. 0
                                                      dedlfix
                    2. 0
                      Gunnar Bittersmann
                      1. 0
                        Jnnbo
                        1. 0
                          Gunnar Bittersmann
                          • javascript
              2. 0
                Gunnar Bittersmann
                • jquery
                1. 0
                  Jnnbo
    3. 0
      dedlfix
  3. 0
    Gunnar Bittersmann
    • css
    • html
    • javascript
    1. 0
      Gunnar Bittersmann