代码之家 › 专栏 › 技术社区 › Achim Udo

.destroy(backstretch)不适用于Ajax内容

jquery-backstretch jquery

Achim Udo · 技术社区 · 6 年前

我有一个网站,其中有一个滑动条的backstretch实例(在div backstretch中),从网站本身的一系列图像中加载。数组如下:

<script>
$('#backstretch').backstretch([
[
{ width: 1400, url: "./img/05_1400.jpg" },
{ width: 1000, url: "./img/05_1000.jpg" },
{ width: 780, url: "./img/05_780.jpg" },
{ width: 500, url: "./img/05_500.jpg" }
],
[
{ width: 1400, url: "./img/02_1400.jpg" },
{ width: 1000, url: "./img/02_1000.jpg" },
{ width: 780, url: "./img/02_780.jpg" },
{ width: 500, url: "./img/02_500.jpg" }
]
], {
fade: 2000,
duration: 5000
});
</script>

要在单击时更改此滑块的图像集,我将使用jquery.load()在网站中加载新内容。新内容还有一个带有新图像的数组。要启动加载,有一些带有class.item的div在要单击的滑块下面开始加载新的图像集。通过单击一个项目,这里的URL将与项目索引一起动态设置。

jQuery(function(){
$(document).on("click", '.item', function(index, element) {
var index = $('.item').index(this);
var singleurl = 'single_' + index + '.html';
var $instance = $('#backstretch').data('backstretch');
$instance.destroy('preserveBackground');
$('#singleview').fadeIn(1500).load(singleurl);    
});

问题是,我第一次更改图像集时,它工作得很好。旧的电视机坏了,新的电视机在滑动。但是如果我单击下一个项目来加载下一个图像,那么设置旧图像和第一个集合的图像也会出现在slidshow中。它们并没有真正被摧毁。我该怎么修?

1 回复 | 直到 6 年前

Achim Udo 6 年前

所以我现在得到了后台维修人员的帮助。

jQuery(function(e) {
$(document).on("click", '.inneritem', function(index, element) {
var indexe = $('.inneritem').index(this);  // count items
var singleurl = 'single_' + indexe + '.html';  // create url for each item
$('html').animate({scrollTop: '0px'}, 1200).promise().then(function() {     // scroll to top
var $instance = $('#backstretch').data('backstretch');  // get the instance
$instance && $instance.destroy(true);  // destroy it
$('#singleview').fadeIn().load(singleurl);   // load new backstretch slides
});
});
});

目标是将调用放在正确的位置并销毁实例。在我问题的代码中,有一些代码丢失了以使其更简单,但这个代码是主要的问题:

$('html, body').animate({scrollTop: '0px'}, 1200, function() {
$('#singleview').fadeIn().load(singleurl);

我想在加载一个称为backstretch的内容之前滚动到顶部两次(“html,body”)。我以前没见过。.promise()。然后(添加了。现在它就像一个魅力。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前