onclickを実行するために2回クリックする必要があります

私はクリックすると最初にボタンのテキストとクラスを交換するために2回クリックする必要があります。他のすべての時間は、最初のクリックで変更されます。私はすでにchangeUnits（）関数をクリックして削除しようとしましたが、この場合はCelciusに一度変更することができ、値を交換できなくなりました。私は後で別のAPI呼び出しで天気を指定された単位で取得するために値とクラスを割り当てています。誰か私は間違って何を見ていますか？onclickを実行するために2回クリックする必要があります

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を（）'を実行していると、その関数で使用すると、別のクリックリスナを設定しています - そのため、2度クリックする必要があります。不要なリスナーを削除する（ '$（" .Fahrenheit "））。（function（）{' and '$（" Celcius "）}をクリックすると、意図したとおりに動作します。 –

はあなただけtoggleClass()必要とちょうどCまたはF

にテキストを変更する .text()をチェックしたクラスをチェックするには、この..不要を試していません

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

あなたが行く：

説明：

あなたの問題は、非常に簡単です、あなたが二度押す必要があるという事実単純な考えは、ドキュメントが読み込まれるときに関数を割り当てることです。

このトピックについてのご意見・ご感想をEメールにてお寄せください。 の作業コード、それはあなたに本当に似ています

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を実行するために2回クリックする必要があります

答えて

関連する問題