javascript - jQuery在摄氏和华氏之间切换(我这边的逻辑不好)

我正在使用Ajax来处理openweather API。除了一件事，一切都正常。

我正在尝试使按钮在摄氏和华氏温度之间切换。
第一次单击时，该函数会将值转换为华氏度，但是由于某些原因，当再次单击该按钮时，它不会将其转换回摄氏温度。
我找到了可行的不同解决方案，但我真的很想避免复制粘贴，并弄清楚函数逻辑中的错误在哪里。非常感谢您的帮助。
Js Fiddle：https://jsfiddle.net/m8w7gyxe/1/

LE：事实证明错误不止一个:)。谢谢大家。

J.M.的解决方案效果很好。
https://jsfiddle.net/m8w7gyxe/31/

<form>
   <input type="text" name="city" id="searchInput" placeholder="Search for a city...">
   <button type="button" id="searchBtn">
      <span class=" fa fa-search"></span>
   </button>
</form>
<div class="temperature">
   <div class="toggleBtn">
      <span>&#8451;</span> //celsius icon
   </div>
   <span id="temperature"></span>
</div>
<script>
    let degree = '&#8451'; //celsius icon
    let city = $('#searchInput');

    const celsiusToFahrenheit = (celsius) => {
        return (celsius * 9 / 5 + 32);
    }

    $('#searchBtn').on('click', function() {
        $.ajax({
            url: 'https://api.openweathermap.org/data/2.5/weather?q=' + city.val() + '&units=metric&APPID=MYAPPIDHERE',
            type: 'POST',
            dataType: 'json',
            success(response) {
                getResponse(response)
            },
            error(jqXHR, status, errorThrown) {
                alert('City not found...');
            }
        });
    });

    function getResponse(response) {
        $('#temperature').html(response.main.temp.toFixed() + ' ' + degree);

        $('.toggleBtn').on('click', function() {
            if (degree = '&#8451') { //if degree is celsius
                degree = '&#8457'; //change degree to fahrenheit
                $('#temperature').html(celsiusToFahrenheit(response.main.temp.toFixed()) + ' ' + degree);
            }
            if (degree = '&#8457') { // if degree is fahrenheit
                degree = '&#8451'; // change degree to celsius
                $('#temperature').html(response.main.temp.toFixed()  + ' ' + degree);

                console.log(degree); //&#8451
            }
        });
    }
</script>

最佳答案

几个问题：


是的，应该将.on('click')的处理程序带到响应之外，如Mackija所述，您只需要值而不是响应即可执行转换。
您说它可以从摄氏温度转换为华氏温度，但反之则不行，我看不到有从华氏温度转换为摄氏温度的函数。
if (degree = '&#8451')不是比较，而是分配，因此始终通过。使用if (degree == '&#8451')代替
您错过了else中的一个重要else if (degree == '&#8457')，而没有同时运行这两个if。


此处的相关编辑：

    let fahrenheitToCelsius = (fahrenheit) => {
        return ((fahrenheit -32) * 5/9).toFixed(2);
    }
    $('.toggleBtn').on('click',function() {
        if (degree == '&#8451') { //if degree is celsius
            degree = '&#8457'; //change degree to fahrenheit
            $('#temperature').html(celsiusToFahrenheit(parseFloat($('#temperature').text()))  + ' ' + degree);
        }
        else if (degree == '&#8457') { //if degree is fahrenheit
            degree = '&#8451'; //change degree to celsius
            $('#temperature').html(fahrenheitToCelsius(parseFloat($('#temperature').text()))  + ' ' + degree);
        }
    });

试试看，让我知道：https://jsfiddle.net/m8w7gyxe/26/

关于javascript - jQuery在摄氏和华氏之间切换(我这边的逻辑不好)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49383333/