单击图标后更新 html 内容

Question

点击摄氏度或华氏度图标后，我想更改度数和图标。我怎么了，它只更新了一次。

html :

<ul id="list">
    <li></li>
    <li>&nbsp;<i class="wi wi-celsius"></i></li>
    <li></li>
</ul>

JS：

$('#list li:nth-child(2)>i').click(function() {
    var temp = $('#list li:nth-child(2)');
    if ($(this).hasClass('wi wi-celsius')) {
        alert("C");
        var convertedTemp = parseInt(temp.text()) * 9 / 5 + 32;
        temp.html(Math.round(convertedTemp) + '&nbsp;<i class="wi wi-fahrenheit"></i>');

    } else {
        alert("F");
        var convertedTemp = (parseInt(temp.text()) - 32) / (9 / 5);
        temp.html(Math.round(convertedTemp) + '&nbsp;<i class="wi wi-   celsius"></i>');
    }
});

Answer 1

因为您从页面中删除了该元素。该事件不会连接到您添加的新元素。所以你需要使用事件委托。

$('#list li:nth-child(2)').on("click", ">i" , function () {

另一个选项是不替换 HTML，只替换文本和类。

$('#list li:nth-child(2)>i').click(function() {
  var icon = $(this).toggleClass("wi-celsius wi-fahrenheit"),
      li = icon.closest("li"),
      span = li.find("span"),
      num = parseFloat(span.text()),
      isCel = icon.hasClass('wi-celsius'),
      val = isCel ? num * 9 / 5 + 32: (num - 32) * 5 / 9;
  span.text(val);
});

.wi-celsius::after { 
  cursor : pointer;
  content : "°C"
}

.wi-fahrenheit::after { 
  cursor : pointer;
  content : "°F"
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list">
  <li></li>
  <li><span class="num">32</span>&nbsp;<i class="wi wi-celsius"></i>
  </li>
  <li></li>
</ul>

Answer 2

我会使用 JQuery 的开关 class

$('#list li:nth-child(2)>i').click(function(){
  var temp = $('#list li:nth-child(2) > span.num');
  $(this).toggleClass("wi-celsius");
  $(this).toggleClass("wi-fahrenheit");

  if($(this).hasClass("wi-celsius")){
     var convertedTemp = parseInt(temp.text()) * 9 / 5 + 32;
  }else{
     var convertedTemp = (parseInt(temp.text()) -32)/ (9/5);    
  }

  $('#list li:nth-child(2)> span.num').text(convertedTemp);
});

这只会在每次点击时更改它们。

编辑：现在可以通过在@epascarello 的回答中添加跨度来工作

单击图标后更新 html 内容

update html content after clicking on icon

html

javascript

css

jquery

client-side