Question

我想让元素逐一出现。但是在我指定id的同时它们正在逐渐消失。是否有更合适的方式来实现这一目标？

<!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>

Answer 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。

AJAX - 元素更新

1 个答案: