Question

我正在尝试制作一个按钮，在点击时将温度更改为华氏温度，但如果再次单击它，则将温度更改回摄氏温度。如果单击温度符号（即摄氏度），则应将温度更改为华氏温度。如果是华氏温度符号，它应该再次以摄氏温度显示温度。

问题是我当前的按钮将温度更改为华氏温度并立即将其更改回摄氏温度。

在我的研究中，我发现了$rgx25 = '/\<a class\=\"live\" rel\=\"nofollow\" href\=\"(|https:\/\/|http:\/\/)(|www\.)(.*?)\" target\=\"\_blank\"\>(.*?)\<\/a\>/iu'; if (preg_match_all($rgx25, $story['text'], $matches)) { foreach ($matches[0] as $k => $match) { $url = $matches[1][$k] . $matches[2][$k] . $matches[3][$k]; } } jquery函数，但它现在似乎已被弃用了，说实话，我真的不明白如何使用它.n

我也发现了这个stackoverflow qustion，但不知道如何应用我的情况答案：Switch button text back and forth with Bootstrap and jquery

谢谢！

toggle()

请在此处查看完整代码：https://codepen.io/mso122591/pen/XZZWPR

Answer 1

问题是我当前的按钮将温度更改为华氏温度并立即将其更改回摄氏温度。

这是因为你在条件currentTemp = "faren"中设置if (currentTemp=== "cel")，这是第一次返回true，然后你再次使用if条件，你应该使用像这样的else块

var currentTemp = "cel";
$("#tempUnit").click(function() {

      alert("Temperature Changed to Fahrenheit.");
      //   var currentTemp= cel;
      if (currentTemp === "cel") {
        currentTemp = "faren";
        var farCalc = (data.main.temp * 1.8) + 32;

        $('#temp').html("Temperature:" + Math.round(farCalc) + "");
        $('#tempUnit').html("&#8457");
      }
      else {
         currentTemp = "cel";
        alert("Temperature Changed to Celsius");
        $('#temp').html("Temperature:" + data.main.temp + "");
        $('#tempUnit').html("&#8451");
      }

P.S 再次在else块中设置currentTemp = "cel";

Answer 2

首先，Codepen看起来很破旧，老实说极难阅读。我在尝试前放弃了。所以我将以描述我将如何解决问题的方式回答。

首先将您的职责分解为不同的职能。然后将这些功能连接在一起您将管理状态（在这种情况下，您当前所处的程度。最后使用结果和事件处理程序附加到DOM，以便用户单击。每个都是它自己的自包含函数。

$(function() {

var TEMP_SYMBOLS = {
  celceus: '&#8451',
  fahrenheit: '&#8457'
};

var TEMP_CONVERTERS = {
  celceus: function(temp) { return temp; },
  fahrenheit: function(temp) { return (temp * 1.8) + 32; }
};

var currentTemp = 0;
var currentTempMode = 'celceus';

function fetchTemp() {
  // Here is where you fetch the temp from AJAX.
  // For demonstration purposes we will simply hard code a value.
  currentTemp = 32.4;
}

function renderTemp() {
  var symbol = TEMP_SYMBOLS[currentTempMode];
  var converter = TEMP_CONVERTERS[currentTempMode];
  var value = converter(currentTemp);
  $('#temp-output').html('Temperature: ' + value + ' ' + symbol);
}

fetchTemp();
renderTemp();

$('#temp-output').on('click', function() {
  currentTempMode = currentTempMode === 'celceus' ? 'fahrenheit' : 'celceus';
  renderTemp();
});

});

#temp-output {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="temp-output">Loading&hellip;</span>

按钮来回改变文字JS

2 个答案: