トグル/スイッチのボタンを使って機能を正しく実行する方法

Question

トグルボタンを作成して価格を年間および有効に変更しましたが、ユーザーが2回クリックすると値が再び増加します（毎月価格）;

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

は、いくつかの問題がありますが、主な問題は、あなたが間違っている、同義的に表示し、データを使用していることです。トグルをクリックするたびに、表示された値がプルされ、再び変換されます。

まず、データ属性を使用して基準値を保存することをお勧めします。

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

このような何か：

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

次に、あなたはそう...

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

などのデータあなたが唯一の変換を開始するためにデータを取得この方法を引っ張ることができ、テキストを更新すると、データ属性は変更されません。

その他の大きな問題は、クラス名を切り替えることですが、一方向変換のみを行うことです。コールバックでは、totalクラスが存在するかどうかを確認し、それに基づいて年または月に変換してください。

トグルステータスはhasClassで確認できます。

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