jQuery Click事件只觸發一次

-1

出於某種原因，我只能得到click事件在溫度元素（id：#temp）上觸發一次。它轉換成華氏後，它不會轉換回攝氏溫度。我剛開始使用jQuery，所以任何幫助將不勝感激。源代碼如下。jQuery Click事件只觸發一次

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

來源

2017-08-21 Michael Christian Melton

我建議你看**非常仔細**在'if（「＃temp：contains（'° C'）」）'。你認爲那是什麼評估？ – Phil

除了@Phil的評論。您的點擊事件會引發，您的功能正在被調用。我嘗試了你的CodePen例子，只是提出一個簡單的'alert'。所以你的問題不是你說的。 –

@Pil我認爲它評估是否給定的元素包含該字符串，如果不移動到下一個如果或退出，更正？ –

的條件總爲真，因此臨時始終改爲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'; 
     } 
    });

來源

2017-08-21 03:38:08

我想象一下OP使用委託事件處理程序的原因。你爲什麼要改變它？ – Phil

即使使用委託事件處理程序，它也可以工作。都好。它不應該工作嗎？ –

我認爲從原帖中省略所有代碼可能會讓Phil感到困惑，上面的代碼片段打算在$ .getJSON中使用 –

首先，這

if("#temp:contains('&#176; C')")

大約是有用的

if('any non-empty string')

這相當於

if(true)

在任何情況下，我建議你使用一個更好的標誌來表示脾氣目前正在展示的目前的規模。嘗試使用.data API，例如

$("#temp").html(data.main.temp + "&#176; C").data('unit', 'C');

，並在您單擊處理

var temp = $(this); // no need to keep looking this up by ID 
switch (temp.data('unit')) { 
    case 'F': 
    // set temp in C, etc 
    temp.data('unit', 'C') // set the unit flag 
    case 'C': 
    default: 
    // set temp in F, etc 
    temp.data('unit', 'F') // set the unit flag 
}

來源

2017-08-21 03:27:46 Phil

jQuery Click事件只觸發一次

回答

相關問題