0

我正在使用 Swipe JS 2。如果我自己制作 HTML 结构，它可以完美运行，但如果我使用来自 jQuery 的内容填充 HTML，它会在第二张幻灯片上停止。

我的 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。完美的。当我运行网站时，加载并完美启动，但是，当更改幻灯片时，在第二张幻灯片上停止，第二张幻灯片是空白的。那里空无一物。甚至认为HTML上有内容。

最奇怪的部分？如果我在网站加载后立即启动开发人员工具（Chrome 上的 Command + Alt + I），它就可以正常工作。这是什么奇葩行为？:D

任何人都可以帮助我让这个 Swipe JS 运行吗？

4

1 回答 1

0

如果您通过 AJAX 请求使用内容填充滑块，那么您很可能必须等到该 AJAX 请求完成后再构建滑块 - 即在 AJAX 函数的成功回调中。

于 2013-03-12T11:30:05.940 回答