Question

我如何反复回来，即点击按钮切换到摄氏温度，然后再次点击时恢复华氏温度？当然不应该这么难，但我在这里遗漏了一些东西。

以下是相关代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Ancient</title>
</head>
<body>
    <h1><span id="temp1">-40</span> &deg;<span class="units">F</span></h1>
    <p><span id="temp2">-28</span> &deg;<span class="units">F</span></p>
    <button>Show Celsius</button>
    <script
      src="https://code.jquery.com/jquery-3.1.1.js"
      integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
      crossorigin="anonymous">
    </script>
    <script 
      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
      crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="fahtocels.js" type="text/javascript"></script>
</body>
</html>

的jQuery

$(function() {
    let $temp1 = Number($("#temp1").text()),
        $temp2 = Number($("#temp2").text()),
        $units = $(".units").text();

    function fahrToCels(F) {
        return ((5/9) * (F - 32)).toFixed(2);
    }

    $("button").on("click", function() {
        $(this).html("Show Fahrenheit")
        $("#temp1").html(fahrToCels($temp1));
        $("#temp2").html(fahrToCels($temp2));
        $(".units").html("C");
    });
});

Answer 1

这能够在celcius和faherenheit之间来回转换。您缺少的是将其转换回来的功能，以及检查当前单位是什么。这个版本解决了这个问题。

{{ post_data:post_date_gmt }}

Answer 2

您希望拥有某种toggle功能。我会将当前单位存储在像<button id="js-hook" data-current="F">Unit Toggle</button>这样的按钮中。

然后在我的点击事件监听器上运行switch就像这样：

$("#js-hook").click(function() {

  var currentUnit = $(this).attr("data-current");
  switch (currentUnit) {

    case "F":
      // calculate celsius then swap data value
      $(this).attr("data-current", "C");
      break;
    case "C":
      // calculate fahrenheit then swap data value
      $(this).attr("data-current", "F");

  }

});

基本上，每次点击按钮时，它都会读取当前指标，如果它当前为C，我们会运行计算，然后将其设置为F等。

JSBIN DEMO：http://jsbin.com/kafewikece/edit?html,js,console,output

Answer 3

您需要将这些值存储在变量中。它们可以直接附加到窗口以进行快速POC，但最佳做法是将您的行为包含在闭包中以维护数据的完整性。

类似的东西：

// IIFE to create a closure
// $ will be window.jQuery
// sample will be window.sample
// undefined will be an object that is undefined (so you can compare it like null without doing typeof
(function ($, sample, undefined) {
    // add a namespace for the behavior in this closure
    var ns = sample.namespace || (sample.namespace = {});

    var settings = {
        setting: "defaultvalue"
    };

    // attach a named function expersson to the namespace
    // outside of this closure this will be available at window.sample.namespace.handleButtonClick();
    ns.handleButtonClick = function(){
        console.log(settings.setting);
    };

    // document ready
    $(function() {
        // code in here will have access to the ns alias and the settings object
    });

})(window.jQuery, window.sample || (window.sample = {}));
// passing in jQuery and something to attach to the window (window.sample will either be the existing instance of window.sample or a new object)

如何在触发事件（jQuery）后恢复到HTML / DOM中的默认值？

3 个答案: