使用 JSON 数据更新 <li> 文本

Updating <li> text using JSON data

本文关键字：li 文本 JSON 更新 使用 数据      更新时间：2023-09-26

我尝试使用以下脚本使用 JSON 数据更新动态添加的 li 文本（html 代码），但更新方法不起作用，你能帮我检查一下吗？ 

City
<input type="text" id="cinput">
<br>
<input type="button" id="cadd" value="Add">
<input type="button" id="cup" value="Update">
<div class="clista">
<ul class="lista inset" id="citem">
    <li data-val="Campinas">Campinas [T:00ºC H:00%]<a href="#" onclick="if(confirm('Remover?')){parentNode.parentNode.removeChild(parentNode)}">   <span style="float:right;"><b>[X]</b></span></a>
    </li>
    <li data-val="Sao Paulo">Sao Paulo [T:00ºC H:00%]<a href="#" onclick="if(confirm('Remover?')){parentNode.parentNode.removeChild(parentNode)}">   <span style="float:right;"><b>[X]</b></span></a>
    </li>
</ul>
</div>

爪哇语

$("#cadd").on("click", function () {
var cinput = document.getElementById("cinput").value;
var msg = "'Remover?'";
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + cinput + "&units=metric", function (data) {
    var cdados = ('T:' + data.main.temp + 'ºC H:' + data.main.humidity + '%');
    $('#citem').append('<li data-val="' + cinput + '">' + cinput + "  [" + cdados + ']<a href="#" onclick="if(confirm(' + msg + ')){parentNode.parentNode.removeChild(parentNode)}">   <span style="float:right;"><b>[X]</b></span></li>');
    document.getElementById("cinput").value = "";
});
});
$("#cup").on("click", function () {
    var cidade = '';
var oldText = '';
var novotxt = '';
var msg = "'Remover?'";
var Link = ('<a href="#" onclick="if(confirm(' + msg + ')){parentNode.parentNode.removeChild(parentNode)}">   <span style="float:right;"><b>[X]</b></span></a>');
$('.clista li').each(function () {
    var $this = $(this);
    cidade = $(this).data('val');
    oldText = $(this).html();
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + cidade + "&units=metric", function (data) {
        var cdados = ('T:' + data.main.temp + 'ºC H:' + data.main.humidity + '%');
        novotxt = cidade + " [" + cdados + "] ";
        alert(novotxt);
        $this.html(function (index, html) {
            return html.replace(oldText, novotxt + Link);
        });
    });
});
});

jsFiddle here： http://jsfiddle.net/fabiobraglin/rcheaowx/21/

您在这里遇到了一个异步问题。 您有$.each，并且在其中设置oldText并尝试在getJSON的回调中使用它的值。 但是，整个 $.each 循环将在运行任何getJSON回调之前运行，因此oldText最终将设置为集合中所有回调的最后一个元素，因此它只对最终元素是正确的。

这里有两点需要注意：此回调的 html 参数：

$this.html(function (index, html) {
    return html.replace(oldText, novotxt + Link);
});

应该在功能上等同于您尝试使用 oldText 的目的。 但是，在运行此回调之前，元素的内容也会被清除，并且从中返回的任何内容都将是元素的全部内容，因此无需尝试以这种方式替换oldText。 只需返回您的新内容：

$this.html(function (index, html) {
    return novotxt + Link;
});

如果您发现自己处于循环中的变量需要在回调中可用的情况，则可以创建闭包，如下所示：

$('.clista li').each(function () {
    var $this = $(this);
    cidade = $(this).data('val');
    oldText = $(this).html();
    (function getData(_oldText, _cidade) {
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + _cidade + "&units=metric", function(data) {
            var cdados = ('T:' + data.main.temp + 'ºC H:' + data.main.humidity + '%');
            novotxt = _cidade + " [" + cdados + "] ";
            alert(novotxt);
            $this.html(function(index, html) {
                return html.replace(_oldText, novotxt + Link);
            });
        });
    })(oldText, cidade);
});
相关文章：