Question

我能够显示华氏温度并切换按钮以仅正确显示摄氏度单位一次。当我再次单击时，它以摄氏度显示错误的值，然后完全停止显示值。

我的所有功能都嵌套在open weather API的getJSON请求中。

这是我的HTML： ```

<body>
    <div class="main">
        <div class="description-wrapper">
            <div class="date-wrapper" id="date">
                <p></p>
            </div>
            <div class="location-wrapper" id="location">
                <p></p>
            </div>
            <div class="temperature-wrapper" id="temperature">
                <h3 class="weather-description"></h3>
            </div>
            <button class="toggleBtn" id="toggleDegrees">click to change between celsius and fahrenheit</button>
            <div class="author-wrapper">
                <p>Penned by jginbound</p>
                <p>Info provided by Open Weather API</p>
            </div>
        </div>
    </div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
</body>

``` 这是我的JS代码......我要求更多关于评论下的代码片段：“切换学位单位”

```

$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' +      latitude + '&lon=' + longitude + '&APPID=xxxxxx', function(data){
                console.log(data);

//get weather condition text
                var weatherCondition = data.weather[0].description;
                weatherDescription.html(weatherCondition);
                // weatherDescription.html(data.weather[0])

                //return kelvin temperature
                var kelvinTemp = data.main.temp;
                //display temperature in fahrenheit
                var degreeParagraph = '<p class="degreeUnit">';
                degreeParagraph += kelvinToFahrenheit(kelvinTemp);
                degreeParagraph += '<span>';
                degreeParagraph += degreeSymbol;
                degreeParagraph += '<a href="#" id="toggleDegreeUnit">';
                degreeParagraph += 'Fahrenheit';
                degreeParagraph += '</a>';
                degreeParagraph += '</span>';
                degreeParagraph += '</p>';
                weatherWrapper.append(degreeParagraph);

                //toggle Degree Units here

                $('#toggleDegrees').click(function(){
                    console.log($('#toggleDegreeUnit').text());
                    if($('#toggleDegreeUnit').text()==='Fahrenheit'){
                        var displayFahrTemp = kelvinToFahrenheit(kelvinTemp);
                        displayFahrTemp = fahrToCel(displayFahrTemp);
                        console.log(displayFahrTemp);
                        $('.degreeUnit').html('<p>' + displayFahrTemp + '<span>' + degreeSymbol + '<a href="#" id="toggleDegreeUnit">' + ' Celsius' + '</a>' + '</span>' + '</p>');
                    }else{
                        var displayCelTemp = kelvinToFahrenheit(kelvinTemp);
                        displayCelTemp = celToFahr(displayCelTemp);
                        $('.degreeUnit').html('<p>' + displayCelTemp + '<span>' + degreeSymbol + '<a href="#" id="toggleDegreeUnit">' + ' Celsius' + '</a>' + '</span>' + '</p>');
                    }
                });
            });

```

感谢您的反馈！此外，任何有关代码结构/组织/效率的反馈也将受到赞赏。

Answer 1

我认为你必须改变代码。

1）在$（'＃toggleDegrees'）中调用ajax函数$ .getJSON（...）。click（）;

2）为什么你不能拥有“”的静态标签并动态更新$（'＃toggleDegrees'）上的文字.Click（）event。

3）使用调试器;在$（'＃toggleDegrees'）的脚本代码中。单击（）脚本并验证Ajax函数的输出并尝试它。

Answer 2

我在这里看到的问题是，您构建的HTML字符串在if和else语句中都是相同的。

$('.degreeUnit').html('<p>' + displayCelTemp + '<span>' + degreeSymbol + '<a href="#" id="toggleDegreeUnit">' + ' Celsius' + '</a>' + '</span>' + '</p>');

由于 Celsius 作为#toggleDegreeUnit中两个字符串的文本，当您在if语句中查询时，它总是以Celsius的形式返回，因此会返回每次在第一个之后向下else路径（因为你默认为华氏度）。如果您将degreeUnit语句中的else更改为 Fahrenheit ，则代码将来回正确触发。

另外，请确保删除单元前的空格，否则if语句将不匹配！

编辑：我为您创建了一个Fiddle，通过将字符串构建过程抽象为单个函数，显示了一种更有效地组织代码的不同方法。

如何在温度度单位之间正确切换？

2 个答案: