如何简单制作自己的网站,中国软件100强企业,苏州公司变更,购物网页模板维护公司老项目#xff0c;发现问题#xff0c;记录一下~ 1.产生原因
owl 已经实例已经存在,在ajax请求成功后并更改完页面数据后, 但是没有销毁之前实例,并重新生成新的实例,导致没有owl插件没有轮播效果.
2.解决方案
html#xff1a;
div classowl-slider … 维护公司老项目发现问题记录一下~ 1.产生原因
owl 已经实例已经存在,在ajax请求成功后并更改完页面数据后, 但是没有销毁之前实例,并重新生成新的实例,导致没有owl插件没有轮播效果.
2.解决方案
html
div classowl-slider ps-carousel data-owl-autotrue data-owl-looptrue data-owl-speed7500 data-owl-gap30data-owl-navtrue data-owl-item3 data-owl-item-xs1 data-owl-item-sm2 data-owl-item-md3data-owl-item-lg3 data-owl-duration1000 data-owl-mousedragfalse idcarousel-featured-propertiesdiv classps-project ps-project--griddiv classps-project__thumbnaildiv classps-project__imageimg src../img/property/1.jpg alt idimg0 //divaclassps-project__overlay iddetail0/adiv classps-project__actionsa hrefjavascript:void(0) stylefloat: righticlasslnil lnil-star-fill active/i/a/div/divdiv classps-project__contenth4 classps-project__namea idname0房屋名称111/a/h4p classps-project__address idaddress0上海市,闵行区,浦秀路/pp classps-project__pricestrong idprice0¥2,0000/月/strong/pdiv classps-project__metafigurefigcaption房产经济人/figcaptionp idagent0张三/p/figurefigurefigcaption状态/figcaptionp idstate0出售/p/figurefigurefigcaption时间/figcaptionp idbuild07/4/2021/p/figure/divdiv classps-project__servicespspan idarce0i classlnil lnil-size/i250 ㎡/span/ppspan idbedroom0i classlnil lnil-hospital-bed/i3 卧室/span/ppspan idbathroom0i classicon icon-bathtub/i2 浴室/span/p/div/div/divdiv classps-project ps-project--grid//第二个/divdiv classps-project ps-project--grid//第三个/divdiv classps-project ps-project--grid//第四个/div/div
js:
success: function (result) {
// alert(查找成功);
//console.log(result)
var allHouse result.data;
$(#carousel-featured-properties).trigger(destroy.owl.carousel)
$(#carousel-featured-properties).html();// $(#testId).html(div classowl-slider ps-carousel data-owl-autotrue data-owl-looptruedata-owl-speed7500 data-owl-gap30 data-owl-navtrue data-owl-item4 data-owl-item-xs1data-owl-item-sm2 data-owl-item-md3 data-owl-item-lg3 data-owl-duration1000 data-owl-mousedragfalseidcarousel-featured-properties/div);
$(allHouse).each(function (index,house1){
var house house1.bHouse;
var image house1.image;
var agents house1.agents;// 第二种写法,但是无轮播效果
var div div classps-project ps-project--grid\n div classps-project__thumbnail\n div classps-project__imageimg srcimage[0].imageUrl alt idimg0 //divaclassps-project__overlay iddetail0/a\n div classps-project__actionsa hrefjavascript:void(0) stylefloat: righticlasslnil lnil-star-fill active/i/a/div\n /div\n div classps-project__content\n h4 classps-project__namea idname0house.houseName/a/h4\n p classps-project__address idaddress0house.address/p\n /p\n div classps-project__meta\n figure\n figcaption房产经济人/figcaption\n p idagent0agents.name/p\n /figure\n figure\n figcaption状态/figcaption\n p idstate0house.state/p\n /figure\n figure\n figcaption时间/figcaption\n p idbuild0house.buildTime/p\n /figure\n /div\n div classps-project__services\n pspan idarce0i classlnil lnil-size/ihouse.area ㎡/span/p\n pspan idbedroom0i classlnil lnil-hospital-bed/ihouse.bedroom 卧室/span/p\n pspan idbathroom0i classicon icon-bathtub/ihouse.bathroom 浴室/span/p\n /div\n /div\n /div;$(.owl-slider).append(div);});$(.owl-slider).owlCarousel({
items: 3
});},
error: function (){
alert(查询失败);
}
重点: 先销毁实例 再插入数据 再生成实例
//销毁实例代码
$(#carousel-featured-properties).trigger(destroy.owl.carousel)
//生成实例代码
$(.owl-slider).owlCarousel({});
