jQueryクリック可能な文字を追加する

Question

jQueryを追加したスパン要素をクリック可能にするためにCを作成しようとしていますが、クリックしたときにFに変更したいのですが、何らかの理由で機能しません。

$(document).ready(function(){ 
 
     
 
    $("#location").html("<b>New York, NY</b>"); 
 
    $("#temperature").html("112"); 
 
    $("#temperature").append("<span> C </span>"); 
 
    $("span:contains('C')").attr("id", "type"); 
 
    $("span:contains('C')").click(changeNotation()); 
 
}); 
 
    
 
function changeNotation(){ 
 
    var notation = document.getElementById("type"); 
 
    if(notation.textContent == 'C') 
 
     notation.innerHTML = 'F'; 
 
    else if(notation.textContent == 'F') 
 
     notation.innerHTML = 'C'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row text-center well"> 
 
     <h2 class="text-info"> Welcome to the <span><b>Weather App!</span></b></h2> 
 
     <p class="text-primary bg-info text-center"> 
 
      This app will display the weather based on your current location. Click on the C or F to toggle between celcius and fahrenheit.</p> 
 
     <h2 class="text-center text-info"><b> Current location </b></h2> 
 
     <h1 class="text-center text-info" id="location"> </h1> 
 
     <h2 class="text-center text-info"> <b>Current Temperature</b> </h2> 
 
     <h1 class="text-center text-info" id='temperature'> </h1> 
 
    </div> 
 
</div>

Answer 1

ファーストを比較するとき

また、あなたがトリム（）を使用する必要があり、は個人的に私はあなたのコードについてjqueryの

で純粋なJSを参照してくださいすることを好むはありません。

1 - あなたは

$("#temperature").on('click',"span#type", changeNotation); 

012を使用してイベントを委任する必要が追加使用

2 - あなたは、次のコードが役立つCが含まれている場合ではないspan:contains('C')あなたのケースではそれがないときF

含まだけ変更されますクリックイベントにspan#typeを使用する必要が

$(document).ready(function(){ 
 
    $("#location").html("<b>New York, NY</b>"); 
 
    $("#temperature").html("112").append('<span id="type"> C </span>'); 
 
    $("#temperature").on('click',"span#type", changeNotation); 
 
}); 
 

 
function changeNotation(){ 
 
\t var el = $("#type"), 
 
    \t  notation = $("#type").text().trim(); 
 
    if(notation == 'C'){ 
 
     el.html('F'); 
 
    }else if(notation == 'F'){ 
 
     el.html('C'); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row text-center well"> 
 
    <h2 class="text-info"> Welcome to the <span><b>Weather App!</span></b></h2> 
 
    <p class="text-primary bg-info text-center"> 
 
     This app will display the weather based on your current location. Click on the C or F to toggle between celcius and fahrenheit.</p> 
 
    <h2 class="text-center text-info"><b> Current location </b></h2> 
 
     <h1 class="text-center text-info" id="location"> </h1> 
 
    <h2 class="text-center text-info"> <b>Current Temperature</b> </h2> 
 
     <h1 class="text-center text-info" id='temperature'> </h1> 
 
    </div> 
 
</div>

3- CをFに変更するだけで使用できる場合は

$("#temperature").on('click',"span#type:contains('C')", changeNotation); 

とのためのFはまた、あなたは `` を作る必要がある

$("#temperature").on('click',"span#type:contains('F')", AnotherFunction); 

Answer 2

コメントで指摘したように、あなたは$(document).on("click", "#type", function() { changeNotation(); });を使用する必要があります。セレクターはIDに基づいているか、または 'F'に変更されても存在しません。値がすべてのif(notation.textContent.trim() == 'C')