0

AJAX と PHP を使用して、ブラウザーの結果を複数回更新したいと考えています。

ここのコードは getDest.php ファイルを呼び出して、 という div id に追加されるすべての html ファイルを取得しますresults。約 21 の都市があります。一度にすべてを表示するのではなく、各都市を 1 つずつ表示したいと考えています。

私は多くの異なる方法を試しました。

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

単に追加する代わりに、要素に「display：none」CSSプロパティを追加し、「el.slideDown（）」や「el.fadeIn（）」などのjQueryアニメーションで表示することで、いつでも適切なアニメーションを実行できます。 "。

結果が追加されるまでの間隔を1秒以上にしたい場合は、単に交換します。

i * 1000

にとって

i * seconds_in_between * 1000

前の要素が次の要素よりも先に表示を終了することが重要かどうかを考慮する必要があります。これは、必要な時間に影響するためです。

また、ベストプラクティスのために、リクエストが失敗した場合に備えて、「success」関数の横に「error」関数を含めます。ユーザーが何も起きていないことに気付くためだけに何回もクリックするのは望ましくありません。何が失敗したのかを必ず知らせてください。例：「都市リストを読み込めませんでした。」

幸運を！

于 2013-03-02T23:57:17.207 に答える
1

JSFiddle でコード スニペットを作成しました。ここに主要部分：

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

コンテンツを DOM に追加したら、すべてのアイテムを繰り返し処理できます。次に、すべてのアイテムにタイムアウトを設定します (ミリ秒)。タイムアウト後、アイテムが表示されます。show()コンテンツを表示する代わりに、またはその他のものを使用することもできますslideDown():)。

于 2013-03-03T00:11:51.903 に答える