0

我想使用 AJAX 和 PHP 多次更新浏览器结果。

这里的代码会调用一个 getDest.php 文件来检索所有的 html 文件，这些 html 文件将附加到一个名为 的 div idresults中，大约有 21 个城市。我想一个一个地展示每个城市，而不是一次展示所有城市。

我尝试了许多不同的方法，任何帮助表示赞赏。

<script>
function hideContainer() {
  jQuery('.city_container').hide();
};
function showContainer() {
  jQuery('.citywrapper').hover(function() {
    jQuery(this).find('.city_container').show();
  },
  function() {
    jQuery('.city_container').hide();
  });
};
</script>

<script>
$.ajax({
  type: "GET",
  url: "getDest.php"
}).done(function( html ) {
  $("#results").append(html);
  hideContainer();
  showContainer();
});
</script>

getDest.php

<div class="citywrapper">city1 <div class="city_container">descript1</div></div>
<div class="citywrapper">city2 <div class="city_container">descript2</div></div>
<div class="citywrapper">city3 <div class="city_container">descript3</div></div>
<div class="citywrapper">city4 <div class="city_container">descript4</div></div>
<div class="citywrapper">city5 <div class="city_container">descript5</div></div>
<div class="citywrapper">city6 <div class="city_container">descript6</div></div>
....
4

2 回答 2

2

这样的事情呢？如果您的 ajax 调用一次返回所有 HTML，我无法想象您为什么要多次调用。

我在评论中添加了准确解释这里发生的事情，以防你对 jQuery 不太熟悉。

<script>
  $.ajax({
    type: "GET",
    url: "getDest.php",
    success: function(html) {

      // Wrap the raw html into a jquery object
      var elements = $(html);

      // Loop through each top-level element in jquery object.
      $.each(elements, function(i, el) {

        setTimeout(function() {

          // el points to the element at position i in jquery object 'elements'
          $('#results').append(el);

        // Each element takes one more second to append than the previous one
        }, i * 1000);
      }
    }
  });
</script>

除了追加之外，您还可以通过在元素上追加“显示：无”CSS 属性，然后使用 jQuery 动画（例如“el.slideDown()”或“el.fadeIn() ”。

如果您希望在附加结果之间超过一秒，只需交换

i * 1000

为了

i * seconds_in_between * 1000

您应该考虑上一个元素在下一个元素之前完成显示是否对您很重要——因为这会影响所需的时间。

此外，为了最佳实践，在“成功”函数旁边包含一个“错误”函数，以防请求失败。你不希望用户点击很多次却发现什么都没有发生——一定要让他们知道失败的原因。例如“无法加载城市列表”。

祝你好运！

于 2013-03-02T23:57:17.207 回答
1

我在 JSFiddle 上为您创建了一个代码片段。这里是主要部分：

$(".city_container").each(function(index) {
    var cityContainer = this;
    setTimeout(function(){
        $(cityContainer).slideDown();
    }, index * 2000 );
});

将内容添加到 DOM 后，您可以对每个项目进行迭代。然后为每个项目设置超时（以 ms为单位）。超时后将显示该项目。您也可以使用show()或其他任何东西来代替slideDown()显示内容:)。

于 2013-03-03T00:11:51.903 回答