Я пытаюсь переключить div, чтобы при щелчке он преобразовывал температуру в градусы Фаренгейта, а при повторном щелчке он возвращался к показанию в градусах Цельсия, который изначально выводился через API.

Код работает, когда я имею дело только с числами:

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2);
var celsius = data.main.temp; 

$("#temp").on("click", function() {
$("#temp").html($("#temp").html() == fahrenheit ? celsius : fahrenheit)

});

Но он не работает, когда я пытаюсь добавить текст в html, он переключается один раз на преобразование по Фаренгейту, но не переключается обратно при повторном нажатии.

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2);
var celsius = data.main.temp;

$("#temp").on("click", function() {
$("#temp").html($("#temp").html() == fahrenheit + "&deg F" ? celsius + "&deg C" : fahrenheit + "&deg F")

});

Я немного озадачен этим. У меня был поиск вокруг, но я не могу найти решение, которое соответствует тому, что я хочу сделать.

Спасибо за любую помощь.

Вот ссылка на мой codepen

-1
Seekingcat 27 Авг 2017 в 22:40

4 ответа

Лучший ответ

Ваша проблема в проверке через JavaScript onclick.

Когда вы проверяете это, вы используете JavaScript, поэтому вместо использования HTML-элемента градусов вы должны просто использовать градусы char:

Изменить это:

$("#temp").html($("#temp").html() == fahrenheit + "&deg F" ? celsius + "&deg C" : fahrenheit + "&deg F")

К этому:

$("#temp").html($("#temp").html() == fahrenheit + "° F" ? celsius + "° C" : fahrenheit + "° F" )
1
quirimmo 27 Авг 2017 в 19:54

Вы можете сравнить только цифры (без последних 3 символов «° F» или «° C»).

var fahrenheit = (data.main.temp * 1.8 + 32).toFixed(2);
var celsius = data.main.temp;

$("#temp").on("click", function() {
  var numberOnly = $("#temp").html().length - 3;
  $("#temp").html($("#temp").html().substring(0, numberOnly) == fahrenheit ? celsius + "&deg C" : fahrenheit + "&deg F");
});
0
Anthony Ngene 27 Авг 2017 в 20:17

Вы должны проверить, показывает ли он в градусах Цельсия в настоящее время, а затем принять решение на основе этого

$("#temp").on("click", function() {
  var isCelsius = $(this).html().indexOf('C') > -1;
  $('#temp').html(isCelsius ? celsius + '&deg C' : fahrenheit + '&deg F');
});
0
Nafiul Islam 27 Авг 2017 в 19:58

Когда вы используете html () для получения значения, вы получаете разобранный HTML, поэтому у вас нет &deg сущности HTML, но есть проанализированное значение.

Чтобы исправить ваш код, вы можете сравнить значение шестнадцатеричного кода объекта степени.

$("#temp").on("click", function() {
  $("#temp").html($("#temp").text() == fahrenheit + "\xB0 F" ? celsius + "\xB0 C" : fahrenheit + "\xB0 F")
});
0
moondaisy 27 Авг 2017 в 22:18