提问人：Moaad 提问时间：1/5/2017 最后编辑：Sibeesh VenuMoaad 更新时间：1/5/2017 访问量：212
单击图标后更新 HTML 内容
update html content after clicking on icon
问：
单击摄氏或华氏度图标后，我想更改度数和图标。我怎么了，它只是更新一次。
html ：
<ul id="list">
<li></li>
<li> <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) + ' <i class="wi wi-fahrenheit"></i>');
} else {
alert("F");
var convertedTemp = (parseInt(temp.text()) - 32) / (9 / 5);
temp.html(Math.round(convertedTemp) + ' <i class="wi wi- celsius"></i>');
}
});
答：
1赞
epascarello
1/5/2017
#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> <i class="wi wi-celsius"></i>
</li>
<li></li>
</ul>评论
0赞
epascarello
1/5/2017
@MoaadAmer 向元素添加单击事件。从页面中删除该元素并将其替换为新元素。新的元素不会神奇地获取您添加到其他元素的事件。因此，您需要将 click 事件重新绑定到新元素。或者，您可以使用事件委派（将事件添加到父级，父级检查是否在子级上单击），以便将事件附加到动态元素。
0赞
Loaf
1/5/2017
#2
我会使用 JQuery 的切换类
$('#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的答案中添加跨度来工作
评论
0赞
Moaad
1/5/2017
这行不通，因为我仍然需要检查课程是什么，这样我才能分别更新学位，而不仅仅是图标
0赞
Loaf
1/5/2017
@MoaadAmer - 当然，但我只是在解决班级问题。
0赞
Loaf
1/5/2017
@MoaadAmer - 更新了我的答案，为您提供了更多代码
1赞
epascarello
1/5/2017
实际运行您的代码...您将看到它与 OPs 代码有完全相同的问题。它将工作一次。
0赞
Loaf
1/5/2017
@epascarello啊，我用最后一句台词做到了。
评论
temp.html(Math.round(convertedTemp) + ' <i class="wi wi- celsius"></i>');