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組數(shù)據(jù) 渲染到頁面里的圖片也有6個(gè)沒問題// 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(){ ? ? ? ? ? ?//最后一個(gè)元素始終不能觸發(fā)事件 ? ? ? ? ? ? ? ?$(this).css({'transform':'rotate(360deg)'}); ? ? ? ? ? ?},function(){ ? ? ? ? ? ? ? ?$(this).css({'transform':'rotate(0)'}); ? ? ? ? ? ?});*/ ? ? ? ? ? $('#container').find('.pic').hover(function(){ ? ? ? ? ?//最后一個(gè)元素也觸發(fā)了事件 ?構(gòu)造函數(shù)里定義的 this.pic=$('#container dl').find('.pic');不是相等么 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //為什么就不能寫 this.pic ？？？ ? ? ? ? ? ? ? $(this).css({'transform':'rotate(360deg)'}); ? ? ? ? ? },function(){ ? ? ? ? ? ? ? $(this).css({'transform':'rotate(0)'}); ? ? ? ? ? }) ? ? ? } ? }; ? //data總共有6組數(shù)據(jù) ? for(var i=0;i<data.length;i++){ ? ? ? new Products().bindDom(data[i]).bindEvent() ? }