function Products(){
this.pic=$('#container dl').find('.pic');
}
Products.prototype={
bindDom:function(k){
var html = [
'<dl>',
'<dt><a href="javascript:;"><img class="pic" src="'+k.image+'" width="384" height="225" /></a></dt>',
'<dd>',
'<span>',
'<a href="javascript:;">',
'<em>'+k.discount+'</em>'+k.title+'',
'</a>',
'</span>',
'</dd>',
'<dd class="price">',
'<em>'+k.newPrice+'</em>',
'<del>'+k.oldPrice+'</del>',
'<i>'+k.time+'</i>',
'</dd>',
'</dl>'
].join("");
$("#container").append(html);
return this;
},
bindEvent:function(){
// * data总共有6组数据 渲染到页面里的图片也有6个没问题
// console.log(this.pic);
/* 输出
init(0)
init(1)
init(2)
init(3)
init(4)
init(5)
/
// console.log($('#container').find('.pic'));
/*输出
init(1)
init(2)
init(3)
init(4)
init(5)
init(6)*/
/* this.pic.hover(function(){ //最后一个元素始终不能触发事件
$(this).css({'transform':'rotate(360deg)'});
},function(){
$(this).css({'transform':'rotate(0)'});
});*/
$('#container').find('.pic').hover(function(){ //最后一个元素也触发了事件 构造函数里定义的 this.pic=$('#container dl').find('.pic');不是相等么
//为什么就不能写 this.pic ???
$(this).css({'transform':'rotate(360deg)'});
},function(){
$(this).css({'transform':'rotate(0)'});
})
}
};
//data总共有6组数据
for(var i=0;i<data.length;i++){
new Products().bindDom(data[i]).bindEvent()
}
相关分类