Javascript 必须单击两次才能执行onclick

我有一个问题，第一次点击时，我必须点击两次来交换按钮文本和类。所有其他时间，它会在第一次单击时更改。 我已经尝试删除changeUnits（）函数中的click，但在这种情况下，我可以更改为Celcius一次，并且不能再交换值。我之所以分配值和类，是因为我稍后将在另一个api调用中使用它，以指定的单位检索天气。 有人知道我做错了什么吗

html

---

试试这个。。无需检查类您只需检查

切换类（）

，只需检查

.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

功能更改单元（el）{
var thistText=$（el）.text（），
fah_或_ce=$（el）.text（）.trim（）='C'？'F'：'C'；
$（el）.文本（fah_或ce）；
$（el.toggleClass（‘华氏摄氏度’）；
}

F

我不明白为什么只有在单击按钮时才使用函数changeUnits。对我来说，当

$（“#单位”）

更改类时，它应该更多。但最好使用以下代码：

<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();
    }          
}

F
C
函数更改单元（）{
if（$（“#单位”）.hasClass（“华氏”））{
$（“.Fahrenheit”）.hide（）；
$（“.Celcius”）.show（）；
}else if（$（“#单位”）.hasClass（“Celcius”））{
$（“.Fahrenheit”）.show（）；
$（“.Celcius”）.hide（）；
}          
}

好了：

说明：

你的问题很简单，你必须按两次是因为你的功能在你点击时会受到影响， 一个简单的想法是在加载文档时分配函数

工作代码，与您的代码非常相似：

函数初始化（）
{
if（$（“#单位”）.hasClass（“华氏”））
{
$（“.Fahrenheit”）。单击（函数（）
{
$（“.Fahrenheit”）。文本（“C”）；
$（此）.removeClass（“华氏”）.addClass（“Celcius”）；
$（这个）。单击（初始化（））；
});
}
else if（$（“#单位”）.hasClass（“Celcius”））
{
$（“.Celcius”）。单击（函数（）
{
$（“.Celcius”）。文本（“F”）；
$（此）.removeClass（“Celcius”）.addClass（“华氏”）；
$（这个）。单击（初始化（））；
});
}
}

F

在第一次单击时，您正在执行您的

changeUnits（）

，在该函数中，您正在设置另一个单击侦听器-这就是为什么您必须单击两次。删除不必要的侦听器（

$（“.Fahrenheit”）。单击（function（）{

和

$（“.Celcius”）。单击（function（）{

）它将按预期工作。@KarynaMaklakova不客气。祝您愉快：-）

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
}

<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();
    }          
}