Question

当我第一次加载网页时，我会调用此函数来加载数据。

 function campusInfo(id) {

（调用第三方api并获取要显示在页面上的传入ID的数据。...

我在同一页面上有一个超链接，当单击该链接时，它将调用相同的函数并传递新的ID。我想单击此超链接时，页面应加载此ID唯一的新数据，而不是加载数据，但会将其从初始加载中添加到页面上已经存在的数据中。单击此超链接后，我需要以某种方式清除页面中的旧数据。这是我的超链接代码：请注意，我使用的是div而不是实际的超链接，并调用campusInfo（）函数。

 $(r.campuses).each(function (index, item) {
            if (item.campusID != id) { // checks if the current other schools id is not equal to current page main school id 
                    var HTMLcontentSchool = '<div class="ml-32 mt-16 mb"><div class="other-school" onclick="campusInfo(' 
                    + item.campusID + ')"><label class="other-schools-list">' + item.campusName + '</label></div><br /></div>';
                    $('.group').append(HTMLcontentSchool);                     
                }

Answer 1

如果元素$('.group')除了内部数据外没有其他内容，则可以使用$.empty函数清除其所有内容。像这样：

 $(r.campuses).each(function (index, item) {
    if (item.campusID != id) { // checks if the current other schools id is not equal to current page main school id 
            var HTMLcontentSchool = '<div class="ml-32 mt-16 mb"><div class="other-school" onclick="campusInfo(' 
            + item.campusID + ')"><label class="other-schools-list">' + item.campusName + '</label></div><br /></div>';
            $('.group').empty();  // <----------------------Empties contents
            $('.group').append(HTMLcontentSchool);                     
        }

否则，如果还有其他子元素需要保留，则必须保留先前添加的节点的引用，以便以后删除。像这样：

var addedData = null;
$(r.campuses).each(function (index, item) {
    if (item.campusID != id) { // checks if the current other schools id is not equal to current page main school id 
            var HTMLcontentSchool = '<div class="ml-32 mt-16 mb"><div class="other-school" onclick="campusInfo(' 
            + item.campusID + ')"><label class="other-schools-list">' + item.campusName + '</label></div><br /></div>';
            if (!!addedData) { addedData.remove() } // check is exists, if so, remove.
            addedData = $(HTMLcontentSchool) // wrap as a jQuery object
            $('.group').append(HTMLcontentSchool);                     
        }

如何使用javascript中的新数据重新加载页面？

1 个答案: