我正在使用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吗?
答案 0 :(得分:0)
如果您通过AJAX请求填充带有内容的滑块,那么在构建滑块之前,您很可能必须等到AJAX请求完成 - 即在AJAX函数的成功回调中。