jQuery 单击事件仅触发一次

迈克尔·克里斯蒂安·梅尔顿

出于某种原因,我只能让点击事件在温度元素(id:#temp)上触发一次。转换为华氏度后,它不会转换回摄氏温度。我刚开始使用 jQuery,所以任何帮助将不胜感激。源代码如下。

HTML 源代码:

<html>
  <head>
    <link rel="stylesheet" href="main.css"/>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>
  </head>

  <body>
    <h1>Local Weather Code Camp Project</h1>
    <h4>Location</h4>
    <p id="location"></p>
    <h4>Weather</h4>
    <p id="weather"></p>
    <img id="icon">
    <h3 id="temp"></h3>
    <p id="check"></p>
  </body>
</html>

jQuery 源代码:

$(document).ready(function () {
 navigator.geolocation.getCurrentPosition(function(position) {
   $.getJSON('https://fcc-weather-api.glitch.me/api/current?lat=' + position.coords.latitude + '&lon=' + position.coords.longitude , function(data){
     var tmpInt = 0;
     $("h1").html(JSON.stringify(data));
     $("#location").html(data.name);
     $("#weather").html(data.weather[0].description);
     $("#icon").attr("src", data.weather[0].icon);
     $("#temp").html(data.main.temp + "&#176; C");
     $(document).on('click','#temp',function() {
       tmpInt = data.main.temp;
       tmpInt = tmpInt * 1.8 +32;
       if("#temp:contains('&#176; C')") {
          $("#temp").html(tmpInt + "&#176; F");
          $("#check").html("Contains C");
       }
       else if("#temp:contains('&#176; F')") {
         $("#temp").html(data.main.temp + "&#176; C");
         $("#check").html("Contains F");
       }
     });
   });
 });
});

在这里工作 CodePen

dougtesting.net

条件始终评估为真,因此温度始终更改为 F。

使用另一个变量来记住显示的单位(C 或 F)有效......

    var units = 'C';

    $("#temp").on("click", function() {
      tmpInt = data.main.temp;
      tmpInt = tmpInt * 1.8 + 32;

      if (units == 'C') {
        $("#temp").html(tmpInt + "&#176; F");
        units = 'F';
      } else if (units == 'F') {
        $("#temp").html(data.main.temp + "&#176; C");
        units = 'C';
      }
    });

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击事件仅触发一次JQuery / bPopup

来自分类Dev

jQuery UI效果.on单击仅触发一次

来自分类Dev

jQuery .change()事件仅触发一次

来自分类Dev

更改事件处理程序仅触发一次,jQuery

来自分类Dev

仅触发一次jQuery滚动事件

来自分类Dev

仅触发一次jQuery mousemove事件

来自分类Dev

jQuery Bootstrap Datepicker Click事件仅触发一次

来自分类Dev

更改事件处理程序仅触发一次,jQuery

来自分类Dev

仅触发一次jQuery滚动事件

来自分类Dev

jQuery Mobile vclick事件仅触发一次

来自分类Dev

jQuery animate仅通过keypress事件触发一次

来自分类Dev

仅触发一次jQuery函数?

来自分类Dev

jQuery bind()仅触发一次

来自分类Dev

jQuery单击仅工作一次

来自分类Dev

jQuery单击仅工作一次

来自分类Dev

jQuery Ajax只需单击一次即可触发2个事件

来自分类Dev

jQuery单选按钮在第一次单击时不会触发事件

来自分类Dev

带有动画文本的.fadeToggle上的jQuery .click事件仅触发一次

来自分类Dev

jQuery keyUp函数触发多次,即使事件仅发生一次

来自分类Dev

jQuery事件触发一次,然后不再触发

来自分类Dev

jQuery使用keydown / keyup / keypress事件仅触发一次,而不是按住键时触发多次

来自分类Dev

jQuery(window).resize函数仅触发一次,而不是每个像素触发一次

来自分类Dev

jQuery(window).resize函数仅触发一次,而不是每个像素触发一次

来自分类Dev

jQuery单击事件仅工作一次,但第二次却没有

来自分类Dev

jQuery触发器一次仅适用于addEventListener指定的一个事件

来自分类Dev

JQuery 监听多个事件,但只触发一次

来自分类Dev

jQuery .change()函数必须仅触发一次

来自分类Dev

jQuery触发器('click')仅工作一次

来自分类Dev

jQuery单击事件仅在第一次工作

Related 相关文章

  1. 1

    单击事件仅触发一次JQuery / bPopup

  2. 2

    jQuery UI效果.on单击仅触发一次

  3. 3

    jQuery .change()事件仅触发一次

  4. 4

    更改事件处理程序仅触发一次,jQuery

  5. 5

    仅触发一次jQuery滚动事件

  6. 6

    仅触发一次jQuery mousemove事件

  7. 7

    jQuery Bootstrap Datepicker Click事件仅触发一次

  8. 8

    更改事件处理程序仅触发一次,jQuery

  9. 9

    仅触发一次jQuery滚动事件

  10. 10

    jQuery Mobile vclick事件仅触发一次

  11. 11

    jQuery animate仅通过keypress事件触发一次

  12. 12

    仅触发一次jQuery函数?

  13. 13

    jQuery bind()仅触发一次

  14. 14

    jQuery单击仅工作一次

  15. 15

    jQuery单击仅工作一次

  16. 16

    jQuery Ajax只需单击一次即可触发2个事件

  17. 17

    jQuery单选按钮在第一次单击时不会触发事件

  18. 18

    带有动画文本的.fadeToggle上的jQuery .click事件仅触发一次

  19. 19

    jQuery keyUp函数触发多次,即使事件仅发生一次

  20. 20

    jQuery事件触发一次,然后不再触发

  21. 21

    jQuery使用keydown / keyup / keypress事件仅触发一次,而不是按住键时触发多次

  22. 22

    jQuery(window).resize函数仅触发一次,而不是每个像素触发一次

  23. 23

    jQuery(window).resize函数仅触发一次,而不是每个像素触发一次

  24. 24

    jQuery单击事件仅工作一次,但第二次却没有

  25. 25

    jQuery触发器一次仅适用于addEventListener指定的一个事件

  26. 26

    JQuery 监听多个事件,但只触发一次

  27. 27

    jQuery .change()函数必须仅触发一次

  28. 28

    jQuery触发器('click')仅工作一次

  29. 29

    jQuery单击事件仅在第一次工作

热门标签

归档