Question

你可以看到我的意思here

我想要达到的目标是，在我再次点击开关按钮之前，该数字仍为华氏度。

我的JS代码：

<script src="https://unpkg.com/ag-grid@17.0.0/dist/ag-grid.min.js"></script>

Answer 1

你在问题中省略了这一点，但你的＆＃34;按钮＆＃34;实际上是一个锚。

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

由于没有href，因此默认为当前页面并刷新它。

因此，您必须在click事件处理程序中执行此操作来阻止此操作：

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

Answer 2

您的<a>导致页面在点击时重新加载。

使用preventDefult来阻止此行为：

＆＃13;

$.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");
      }
    })
  })
});

＆＃13;

<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>

＆＃13;

Answer 3

您需要从href元素中删除a属性：

＆＃13;

$.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");
      }
  })
  })
});

＆＃13;

<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>

＆＃13;

按钮刷新页面而不是仅更改元素

3 个答案: