Question

我不知道如何在Stackoverflow中搜索此问题，它提供了不同的解决方案，与我的问题无关。所以我再次需要你的帮助。

变量obj的值：

item.title = Title1 and Title2

item.description = Description1 and Description2

HTML文件：

function test_pop() {
    var fb_id = "xxxxxxxxxxxx";
    var v_id = "xxxxxxxx";

    $.post('http://mysite.com/myfile.php', {fb_id: fb_id, v_id: v_id}, function(data) {
        var obj = $.parseJSON(data);
        $.each(obj,function(index, item){
           achievement = "You Obtained " + item.title + " " + item.description;
           achievement_pop(achievement);
        });
    });
}

achievement_pop功能：

function achievement_pop(data) {
    $("#achievement_popup").html(data).show(); //DIV that should show up
}

所以问题是，当div显示时，它只输出：

    <div> <!-- Imagine that this content is inside a DIV -->
**You Obtained Title2 Description2**

    </div>

但我的愿望输出是：

    <div> <!-- Imagine that this content is inside a DIV -->

**You Obtained Title1 Description1**

**You Obtained Title2 Description2**

    </div>

希望你们帮助我，谢谢。

Answer 1

html函数正在替换div的整个内容，而不只是添加。

解决方案是替换

$("#achievement_popup").html(data).show();

与

$("#achievement_popup").html($("#achievement_popup").html()+data).show();

但它有点沉重。我个人首先要构建html并只使用html函数一次。

Answer 2

使用append()添加到元素的结尾，而不是完全用html()替换内容

或者，如果您想立即用现有内容替换所有新内容：

/* start with empty string*/
var achievement='';
$.each(obj,function(index, item){
    /* add to string on each pass of loop - can use any html you want here*/
     achievement += "You Obtained " + item.title + " " + item.description +'<br>';
});
/* update element once all data parsed*/
 achievement_pop(achievement);

从处理角度来看，解析字符串并进行一次更新是最有效的

$ .each传递值函数

2 个答案: