0

私は Swipe JS 2 を使用しています。HTML 構造を自分で作成すると完全に機能しますが、jQuery からのコンテンツを HTML に入力すると、2 番目のスライドで停止します。

私のHTML構造：

<div id="map" class="swipe">
    <div class="swipe-wrap">
        <div class="city" id="current">
            <div class="location">Current Location</div>
        </div>
    </div>
</div>
<nav>
    <ul id="position">
        <li class="on">Current location</li>
    </ul>
</nav>

これは、jQuery での私の構造です。

$.getJSON("http://localhost/locations.php", function(localdata) {
    $.each(localdata.locations, function(i, geolocal){
        var vcountry = geolocal['country'];
        var vregion = geolocal['region'];
        var vcity = geolocal['city'];

        country = vcountry.replace(' ','_');
        region = vregion.replace(' ','_');
        city = vcity.replace(' ','_');

        // THE PROBLEM IS HERE. IF I USE AJAX OR GETJSON HERE INSIDE THE OTHER GETJSON, THE SWIPE IS BROKEN.
        $.ajax({
            type: "GET",
            url: "http://localhost/remotexml.php?url=http://www.yr.no/place/"+ country +"/"+ region +"/"+ city +"/forecast.xml",
            success: function(xml) {
                var localName = $(xml).find('location name').text();
                $('#map div.swipe-wrap .city:last-child').after('\n<div class="city">\n<div class="location">'+localName+'</div>\n</div>\n</div>');
                $('#position').append('\n<li>'+localName+'</li>');
            }
        });

    });
})
.success(function() { })
.error(function() { })
.complete(function() {
    var slider = 
      Swipe(document.getElementById('map'), {
        auto: 5000,
        continuous: true,
        callback: function(pos) {

          var i = bullets.length;
          while (i--) {
            bullets[i].className = ' ';
          }
          bullets[pos].className = 'on';

        }
      });

    var bullets = document.getElementById('position').getElementsByTagName('li');
});

何が起こるか: jQuery によって作成された HTML を見ると、完璧です。jQuery は、スライダー内に div を作成し、リスト内に lis を作成しています。完全。Web サイトを実行すると、完全に読み込まれ、開始されますが、スライドを変更すると、2 番目のスライドで停止し、2 番目のスライドは空白になります。そこには何もありません。HTMLにコンテンツがあると思っても。

最も奇妙な部分は？Web サイトが読み込まれた直後に開発者ツール (Chrome では Command + Alt + I) を起動すると、完全に機能します。これはどのような奇妙な行動ですか？:D

この Swipe JS を実行するのを手伝ってくれる人はいますか?

4

1 に答える 1

0

AJAX リクエストを介してスライダーにコンテンツを入力している場合、ほとんどの場合、スライダーを構築する前に、その AJAX リクエストが完了するまで待機する必要があります (つまり、AJAX 関数の成功コールバック内)。

于 2013-03-12T11:30:05.940 に答える