Кнопка обновляет страницу, а не просто изменяет элемент

Вы понимаете, что я имею в виду здесь

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

Мой код JS:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=&lon=", function(json){
  var temp = json.main.temp;
  var ftemp = (temp * 1.8) + 32
  var celsius = true;
  $(document).ready(function() {
    $("#temperature").html(temp);
    $("#button").on("click", function(){
    celsius = !celsius;
    if (celsius)
      {
        $("#temperature").html(temp);
      }
    else
      {
        $("#temperature").html(ftemp);
        $("#button").html("F");
      }
  })
  })
});

Почему вы помещаете $(document).ready() в обратный вызов вызова ajax?

Phiter 11.04.2018 14:16
1
1
29
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы пропустили это в своем вопросе, но ваша «кнопка» на самом деле является якорем.

<a id="button" href="">C</a>

Поскольку href отсутствует, он по умолчанию будет использовать текущую страницу и обновит ее.

Поэтому вы должны предотвратить это, сделав это в обработчике событий click:

$("#button").on("click", function(event){
    event.preventDefault(); // <-- will stop the page from refreshing

Ваш <a> вызывает перезагрузку страницы при нажатии на нее.

Используйте preventDefult, чтобы предотвратить такое поведение:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=&lon=", function(json) {
  var temp = json.main.temp;
  var ftemp = (temp * 1.8) + 32
  var celsius = true;
  $(document).ready(function() {
    $("#temperature").html(temp);
    $("#button").on("click", function(e) {
      e.preventDefault();  // <-- here
      celsius = !celsius;
      if (celsius) {
        $("#temperature").html(temp);
      } else {
        $("#temperature").html(ftemp);
        $("#button").html("F");
      }
    })
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
  <h1>Local Weather App</h1>
  <div id="data">
    <div id="temperature">

    </div>
    <a id="button" href="">C</a>
  </div>
</center>

Вам необходимо удалить атрибут href из вашего элемента a:

$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=&lon=", function(json){
  var temp = json.main.temp;
  var ftemp = (temp * 1.8) + 32
  var celsius = true;
  $(document).ready(function() {
    $("#temperature").html(temp);
    $("#button").on("click", function(){
    celsius = !celsius;
    if (celsius)
      {
        $("#temperature").html(temp);
      }
    else
      {
        $("#temperature").html(ftemp);
        $("#button").html("F");
      }
  })
  })
});
<center>
<h1>Local Weather App</h1>
<div id = "data">
  <div id ="temperature">
  </div>
  <a id="button">C</a>
</div>  
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

В этом есть важная вещь. Если вы удалите href со своего якоря, при наведении на него курсор не будет pointer. На iOs события щелчка запускаются только для элементов с cursor: pointer. Вы можете поставить это кормушку css. Странно, правда?

Phiter 11.04.2018 14:36

Другие вопросы по теме