logo

Přepnout innerHTML

Co takhle přidat třídu, která vám dá vědět o stavu rozbalení/sbalení?

$(document).ready(function() {
  $(".A1").click(function() {
    var $this = $(this);
    $(".P1").toggle("slow")

    $this.toggleClass("expanded");

    if ($this.hasClass("expanded")) {
      $this.html("-");
    } else {
      $this.html("+");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A1 expanded">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
  Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>

Příklad: http://jsfiddle.net/sGxx4/


$(document).ready(function() {
    $(".A1").click(function() {
        $(".P1").toggle("slow");
        $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+")));
    });
});

Trochu vysvětlení:Nastavuji $("#A1").html() se součinem terciárního operátoru, pomocí kterého zkontrolujete aktuální hodnotu #A1 text uživatele. Pokud je to + , nastavil jsem text prvku na - , jinak jsem to nastavil na + .

Řekl jste však „efektivně“. Za tímto účelem je důležité poznamenat, že pokud budete selektor používat dvakrát nebo vícekrát ve stejné funkci, měli byste uložit objekt jQuery, který je výsledkem vámi zadaného selektoru, do proměnné, takže nemusíte pokaždé znovu spusťte volič. Zde je kód s touto úpravou:

$(document).ready(function() {
    $(".A1").click(function() {
        var $A1 = $(".A1");
        $(".P1").toggle("slow");
        $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
    });
});

Neexistuje žádný způsob, jak přepínat obsah. Můžete zkontrolovat, zda je $('.P1') vidět, a poté podle toho změnit div +/-.

Něco jako :

$(document).ready(function() {
    $(".A1").click(function() {
     $(".P1").toggle("slow", function(){
       if($(this).is(':visible'))
           $(".A1").html("-")
       else
           $(".A1").html("+")
     });
   });
});

Pomocí funkce zpětného volání (druhý argument z .toggle() metoda) pro provedení kontroly zaručí, že kontrolu provádíte po dokončení animace.

JsFiddle:http://jsfiddle.net/cy8uX/