不得不點擊兩次執行onclick

我有問題，我必須點擊兩次才能在第一次單擊時交換按鈕文本和類。所有其他時間在第一次點擊時發生變化。我已經嘗試刪除單擊changeUnits（）函數內部，但在這種情況下，我可以更改爲Celcius一次，不能再交換值。我正在分配價值和班級，因爲我打算稍後在另一個API調用中使用它來檢索指定單元中的天氣。有沒有人看到我在做什麼錯了？不得不點擊兩次執行onclick

HTML

<button id="units" class="Fahrenheit" onclick="changeUnits();callWeather()">F</button>

的JavaScript

 function changeUnits() { 
     if($("#units").hasClass("Fahrenheit")) { 

      $(".Fahrenheit").click(function() { 
       $(".Fahrenheit").text("C"); 
       $(this).removeClass('Fahrenheit').addClass('Celcius'); 
      }); 
     } 
     else if($("#units").hasClass("Celcius")) { 
      $(".Celcius").click(function() { 
       $(".Celcius").text("F"); 
       $(this).removeClass('Celcius').addClass('Fahrenheit'); 
      }); 
     }   
     }

來源

2017-06-15 Karyna Maklakova

你執行首先點擊你的'changeUnits（）'和在該功能你設定另一個點擊監聽器 - 這就是爲什麼你必須點擊兩次。刪除不必要的監聽器（'$（「。Fahrenheit」）。click（function（）{'and'$（「。Celcius」）。click（function（）{'），它將按預期工作。 –

試試這個。沒有必要檢查類，你只需要toggleClass()，只是檢查.text()的文字更改爲C或F

function changeUnits(el) {   // pass el here 
    var ThisText = $(el).text(),  // get text from this element 
     fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C'; // set fah_or_ce as a variable and check if C return F and if else return C 
    $(el).text(fah_or_ce);  // change text with new text 
    $(el).toggleClass('Fahrenheit Celcius'); // toggle between classes 
}

並使用它onclick = "changeUnits(this)"

演示1

function changeUnits(el) { 
 
    var ThisText = $(el).text(), 
 
     fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C'; 
 
    $(el).text(fah_or_ce);  
 
    $(el).toggleClass('Fahrenheit Celcius'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="units" class="Fahrenheit" onclick="changeUnits(this)">F</button>

對我來說我更喜歡使用.on(click)事件，而不是在線onclick

演示2

$(document).ready(function(){ 
 
    $('#units').on('click' , function(){ 
 
     changeUnits(this); 
 
     // you can use callWeather() as well 
 
     //callWeather(); 
 
    }); 
 
}); 
 

 
function changeUnits(el) { 
 
    var ThisText = $(el).text(), 
 
     fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C'; 
 
    $(el).text(fah_or_ce);  
 
    $(el).toggleClass('Fahrenheit Celcius'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="units" class="Fahrenheit">F</button>

來源

2017-06-15 17:27:12

謝謝幫助！ –

@KarynaMaklakova不客氣..有一個美好的一天:-) –

我不明白爲什麼只有在點擊按鈕時才使用函數changeUnits。對於我來說，它應該更多，當$("#units")更改類。但它會更好地使用此代碼對你：

<button id="units" class="Fahrenheit" onclick="changeUnits();callWeather()">F</button> 
<button id="units" class="Celsius" onclick="changeUnits();callWeather()" style="display: none;">C</button> 



function changeUnits() { 
    if($("#units").hasClass("Fahrenheit")) { 
     $(".Fahrenheit").hide(); 
     $(".Celcius").show(); 
    }else if($("#units").hasClass("Celcius")) { 
     $(".Fahrenheit").show(); 
     $(".Celcius").hide(); 
    }   
}

來源

2017-06-15 17:30:49 Kaenn

你去那裏：

說明：

你的問題很簡單，事實上，你必須按兩次是因爲您的功能確實會影響到交換，一旦您點擊，一個簡單的想法是在文檔加載時指定您的功能

工作代碼，這是真的與你相似：

function initialize() 
 
     { 
 
      if($("#units").hasClass("Fahrenheit")) 
 
      { 
 

 
       $(".Fahrenheit").click(function() 
 
       { 
 
        $(".Fahrenheit").text("C"); 
 
        $(this).removeClass("Fahrenheit").addClass("Celcius"); 
 
        $(this).click(initialize()); 
 
       }); 
 
      } 
 
      else if($("#units").hasClass("Celcius")) 
 
      { 
 
       $(".Celcius").click(function() 
 
       { 
 
        $(".Celcius").text("F"); 
 
        $(this).removeClass("Celcius").addClass("Fahrenheit"); 
 
        $(this).click(initialize()); 
 
       }); 
 
      } 
 
     }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    </head> 
 
<body onload="initialize()"> 
 
<button id="units" class="Fahrenheit">F</button> 
 
</body> 
 
</html>

來源

2017-06-15 17:46:00 TinkeringMatt

不得不點擊兩次執行onclick

回答

相關問題