Question

我创建了一个切换按钮，可以将价格更改为年度和工作正常，但问题是，当用户点击两次时，它会再次乘以该值（而不是回到每月价格）;

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

有几个问题，但主要问题是你可以互换使用显示器和数据，这是错误的。每次单击切换时，它都会拉出显示的值并再次转换它。

对于初学者，我建议使用data属性来存储基值。

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")

如何使用切换/切换fbutton正确运行功能

1 个答案: