不得不点击两次执行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

回答

相关问题