Question

我正在尝试使用jQuery添加的span元素中的C可单击，我希望它在单击时更改为F，但由于某种原因它不起作用。

＆＃13;

$(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';
}

＆＃13;

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

＆＃13;

Answer 1

正如评论中所指出的，您应该使用$(document).on("click", "#type", function() { changeNotation(); });。选择器应基于id或当它变为'F'时它不存在。

此外，在比较值if(notation.textContent.trim() == 'C')

时应使用trim（）

Answer 2

首先，我个人不喜欢看jquery的纯js

关于您的代码：

1-使用追加时，您需要使用

委派事件

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

2-您需要在点击事件span#type上使用span:contains('C')而不是$(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(){ var el = $("#type"), notation = $("#type").text().trim(); if( notation == 'C'){ el.html('F'); }else if(notation == 'F'){ el.html('C'); } }，如果包含C而不包含F

下一个代码将有所帮助

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

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

3-如果您只需要将C更改为F，则可以使用

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

对于包含F，您将需要另一个点击事件

vector<EncodedFiles> encodedAll;
for cycle
     load content of file
     encodedAll[0].setData(sequence);

jQuery添加可点击的字母

2 个答案: