Question

我尝试使用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>

的Javascript

$("#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这里：http://jsfiddle.net/fabiobraglin/rcheaowx/21/

Answer 1

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

此处需要注意两件事：此回调的$this.html(function (index, html) { return html.replace(oldText, novotxt + Link); });参数：

oldText

应该在功能上等同于您尝试使用oldText的内容。但是，在运行此回调之前，元素的内容也会被清除，无论您从中返回什么内容都将是元素的全部内容，因此无需尝试替换{{1 }} 通过这种方式。只需返回您的新内容：

$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);
});

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

1 个答案: