如题，是不是要$.each循环数组然后append一个html 有没有什么简便的方法绑定数据？
CharlesShu
- 发布：2015-05-07 19:28
- 更新：2015-06-03 17:09
- 阅读：3317
动态构造的dom页面，需要手动调用一次slider的初始化方法，如下：
var gallery = mui('#mui-slider');
gallery.slider({
interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});
CharlesShu (作者)
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/muwu.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/cbd.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">
</a>
</div>
</div>这种数据如何遍历呢？
CharlesShu (作者)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
mui.ajax("http://m.xx.com/api/indexData", {
dataType: 'json',
success: function(data) {
ad_data = data.data.ad_data;
count = ad_data.length;
$.each(data.data.ad_data,function(i,obj){
if(i==0){
$(".mui-slider-group").append('<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://static.xx.com/'+ad_data[count-1].ad_img+'"></a></div>')
}
var str = '<div class="mui-slider-item"><a href="#"><img src="http://static.xx.com/'+obj.ad_img+'"></a>';
$(".mui-slider-group").append(str);
if(i==(count-1)){
$(".mui-slider-group").append('<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://static.xx.com/'+ad_data[0].ad_img+'"></a></div>')
}
})
}
})
})
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<span class="mui-icon mui-icon-bars mui-pull-left"></span>
<span class="mui-icon mui-icon-contact mui-pull-right"></span>
<h1 class="mui-title">demo</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
</body>
</html>贴上完整代码，我发现这个动态构造mui-slider-group里的html内容是对的，就是不能切换以及自动轮播，如果把动态赋值的html直接拷贝到静态页面，是没有问题的？请问我的问题出在哪里
动态解决方法
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderGroup" class="mui-slider-group mui-slider-loop"> </div>
<div id="sliderIndicator" class="mui-slider-indicator"> </div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
var slider = mui("#slider");
slider.slider({ interval: 3000 });
function InitData(){
$("#sliderGroup").html(html);
$("#sliderIndicator").html(sliderIndicator);
var slider = mui("#slider");
slider.slider({ interval: 3000 });
}
CharlesShu (作者)
我试试，谢谢
2015-05-08 09:58