Wie man Funktion mit Toggle/Schalter fbutton richtig laufen lässt

Question

Ich habe einen umschaltbaren Knopf geschaffen, der Preise zu jährlichem ändert und gut arbeitet, aber das Problem ist, dass wenn der Benutzer es zweimal klickt, der Wert wieder multipliziert wird (nicht zurück zu dem monatlichen) Preis);

html.

<div class="total" name="total" id="total"> $0</div>

jquery

$("#toggle").click(function() { 

     $("#total").toggleClass("total", 500).promise().done(function() { 

     var tlt = $("#total").text().replace("$",""); 

     var tlt_price = parseFloat(tlt); 

     var min_price = tlt_price - 1; 

     var tlt_n = min_price * 12; 

     $(".total").html(tlt_n); 



    }); 

    }); 

Answer 1

Es gibt einige Probleme, aber das Hauptproblem ist, dass Sie die Anzeige und Daten austauschbar verwenden, was falsch ist. Jedes Mal, wenn Sie auf den Schalter klicken, wird der angezeigte Wert abgerufen und erneut konvertiert.

Zunächst würde ich vorschlagen, mit dem Datenattribut den Basiswert zu speichern.

https://api.jquery.com/data/

Etwas wie folgt aus:

<div class="total" data-total="0" name="total" id="total"> $0</div> 

Dann können Sie die Daten wie so ziehen ...

var tlt = $("#total").data("total"); 

Auf diese Weise können nur die Daten ziehen die Konvertierung zu starten, Wenn Sie den Text aktualisieren, bleibt das Datenattribut unverändert.

Das andere wichtige Problem ist, dass Sie den Klassennamen umschalten, aber nur eine einseitige Konvertierung. Beim Rückruf sollten Sie prüfen, ob die Klasse total existiert, und basierend darauf auf Jahres- oder Monatsbasis konvertieren.

Sie können den Toggle-Status mit hasClass wie folgt überprüfen.

$("#total").hasClass("total")