AJAX - 元素更新答案

【问题标题】：AJAX - Element UpdateAJAX - 元素更新
【发布时间】：2014-02-18 08:47:56
【问题描述】：

我想让元素一个一个出现。但尽管我指定了 id，但它们同时淡入淡出。有没有更合适的方法来实现 tihs？

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<script>
var i=0;
function loadXMLDoc()
{
var xmlhttp,txt,x;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
    xmlDoc=xmlhttp.responseXML;
    txt=" ";
    x=xmlDoc.getElementsByTagName("ARTIST");
    setInterval(function() {
      txt+=x[i].childNodes[0].nodeValue + "<br>";
      $('#myDiv').html('<p id="p'+i+'" style="display:none;">'+txt+'</p>');
      $("#p"+i).fadeIn(1000);   
      i+=1;                }, 2000);
   }
  xmlhttp.open("GET","http://www.w3schools.com/ajax/cd_catalog.xml",true);
  xmlhttp.send();
}
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html>

【问题讨论】：

我是用.append() 而不是.html() 做的。看到我的错了，怎么都是同时更新的……有没有更优雅的方法？

标签： javascript jquery html ajax xml

【解决方案1】：

既然您已经在使用 jQuery……不确定这是否更优雅……但它更简单一些。 :)

$(document).ready(function () {
  $('button').click(function () {
    $.ajax({
      type: "GET",
      url: "cd_catalog.xml",
      dataType: "xml",
      success: function (xml) {
        $(xml).find('ARTIST').each(function (i) {
          artist = $(this).text();
          $("#myDiv").append("<p class='artist'>" + artist + "</p>");
          $(".artist").delay(i * 1000).fadeIn(1000);
        });
      }
    });
  });
});

CSS：

.artist {
    display:none;
}

和您现有的 HTML。

【讨论】：