jQuery add klickbaren Buchstaben

Question

Ich versuche, das C in meinem jQuery-added span-Element anklickbar zu machen, und ich möchte, dass es in F geändert wird, wenn Sie darauf klicken, aber aus irgendeinem Grund funktioniert es nicht.

$(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

Zu allerersten persönlich bevorzuge ich nicht rein js mit jquery

über den Code zu sehen:

1- Wenn Sie Ereignis müssen mit anhängen delegieren, indem

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

012 mit

2- Sie benötigen span#type auf Click-Ereignis span:contains('C') es, wenn C, wenn enthalten F

der nächste Code

$(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>

nicht enthalten nur ändert sich in Ihrem Fall nicht verwenden

helfen

3- Wenn Sie nur C zu F ändern müssen, können Sie

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

01 verwenden

und enthält F Sie werden Sie

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

Answer 2

Wie in den Kommentaren darauf hingewiesen wurde, sollten Sie $(document).on("click", "#type", function() { changeNotation(); }); verwenden. Der Selektor sollte auf der ID basieren oder wenn er sich zu "F" ändert, wird er nicht existieren.

Zusätzlich sollten Sie trim(), wenn die Werte zu vergleichen if(notation.textContent.trim() == 'C')