Question

我正在为我的项目使用Wikipedia API。当我单击按钮显示引号时，我的代码会动态地将维基百科的文章附加到与特定作者相关的文章中。然而，当我点击其他人的新李的作者添加到ul，所以旧文章（李）没有删除。我试图在追加到ul之前将代码放入for循环但是当我点击按钮时它只添加一篇文章，而不是全部。

我的代码是：

var getWikiAuthorBio = function(author) {
  var url =  'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + author + '&format=json&callback=wikiCalback'

//////////////
//Wiki request
/////////////
var wikirequest = function() {
    $.ajax({
      url:url,
      dataType: 'jsonp',
      success: function(wikiData) {

      // Fetch the biographical information
      var bioName = wikiData[2][0];

      // Check if instead of bio there is a phrase "The article may refer to...." if so then change indices
      if (bioName.indexOf('may refer to') >= 0) {
        bioName = wikiData[2][1];
      } else {
        var bioName = wikiData[2][0];
      }

      var wikiArcticles = wikiData[1];
      var wikiArticlesShortInfo = wikiData[2]
      console.log(wikiArticlesShortInfo);

      for (var i=0; i < wikiArcticles.length; i++) {

        console.log("Each article " + wikiArcticles[i]);
        domCache.$wikiArticlesList.append('<li class="articleItem">'+ wikiArcticles[i]+ '</li>');   
      }

      // Short biography
      console.log(bioName);
      console.log(wikiArcticles);
      console.log(url);

      domCache.$bioDiv.text(bioName);



      } // end of success
    });
}// wikirequest

wikirequest();

}

Link to Codepen

Answer 1

在循环之前清空你的清单。

var getWikiAuthorBio = function(author) {
  var url =  'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + author + '&format=json&callback=wikiCalback'

//////////////
//Wiki request
/////////////
var wikirequest = function() {
    $.ajax({
      url:url,
      dataType: 'jsonp',
      success: function(wikiData) {

      // Fetch the biographical information
      var bioName = wikiData[2][0];

      // Check if instead of bio there is a phrase "The article may refer to...." if so then change indices
      if (bioName.indexOf('may refer to') >= 0) {
        bioName = wikiData[2][1];
      } else {
        var bioName = wikiData[2][0];
      }

      var wikiArcticles = wikiData[1];
      var wikiArticlesShortInfo = wikiData[2]
      console.log(wikiArticlesShortInfo);

      domCache.$wikiArticlesList.html(''); // <--- add this
      for (var i=0; i < wikiArcticles.length; i++) {

        console.log("Each article " + wikiArcticles[i]);
        domCache.$wikiArticlesList.append('<li class="articleItem">'+ wikiArcticles[i]+ '</li>');   
      }

      // Short biography
      console.log(bioName);
      console.log(wikiArcticles);
      console.log(url);

      domCache.$bioDiv.text(bioName);



      } // end of success
    });
}// wikirequest

wikirequest();

}

Answer 2

您还可以使用jQuery empty函数。

domCache.$wikiArticlesList.empty();

在for-loop之前加入

Answer 3

请尝试.html而不是.append：

domCache.$wikiArticlesList.html('<li class="articleItem">'+ wikiArcticles[i]+ '</li>')

或者在添加新的之前删除最后一个：

domCache.$wikiArticlesList.children('li:last').remove();
domCache.$wikiArticlesList.append('<li class="articleItem">'+ wikiArcticles[i]+ '</li>')

Answer 4

您可以使用.append()或.html()。

// with .append()
domCache.$wikiArticlesList.empty();  
for (var i=0; i < wikiArcticles.length; i++) {

  console.log("Each article " + wikiArcticles[i]);   
  domCache.$wikiArticlesList.append('<li class="articleItem">'+ wikiArcticles[i]+ '</li>');   
}

// with .html()
var wikiArticlesListHtml = '';
for (var i=0; i < wikiArcticles.length; i++) {

  console.log("Each article " + wikiArcticles[i]);   
  html += '<li class="articleItem">'+ wikiArcticles[i]+ '</li>\n';   
}
domCache.$wikiArticlesList.html(wikiArticlesListHtml);

注意：.append()不仅适用于包含HTML的字符串，而.html()仅适用于包含HTML的字符串。

在单击按钮之前删除preveous附加列表项

4 个答案: