什麼是最有效的方式來在JavaScript中設置此功能？

Question

總noob在這裏，我假設有一種方法來寫這個更快/更小。有什麼建議？

對不起，如果它沒有真正減少&出我框架使用，但這裏是一個現場示例，如果有幫助。

活生生的例子：http://linkthegeek.com/public/code/bookmarker/index.html （僅適用於WebKit的，&我只在Chrome測試）

BannerOne = 1; 
BannerTwo = 2; 
BannerThree = 3; 
BannerFour = 4; 
BannerFive = 5; 

PSD['bannerdrop-'+ BannerOne].y= -200; 
PSD['bannerdrop-'+ BannerTwo].y= -200; 
PSD['bannerdrop-'+ BannerThree].y= -200; 
PSD['bannerdrop-'+ BannerFour].y= -200; 
PSD['bannerdrop-'+ BannerFive].y= -200; 

PSD['bannerbtn-'+ BannerOne].on("click", function(){Bookmark(BannerOne)   }); 
PSD['bannerdrop-'+ BannerOne].on("click", function(){Bookmark(BannerOne)  }); 
PSD['bannerbtn-'+ BannerTwo].on("click", function(){Bookmark(BannerTwo)   }); 
PSD['bannerdrop-'+ BannerTwo].on("click", function(){Bookmark(BannerTwo)  }); 
PSD['bannerbtn-'+ BannerThree].on("click", function(){Bookmark(BannerThree)  }); 
PSD['bannerdrop-'+ BannerThree].on("click", function(){Bookmark(BannerThree) }); 
PSD['bannerbtn-'+ BannerFour].on("click", function(){Bookmark(BannerFour)  }); 
PSD['bannerdrop-'+ BannerFour].on("click", function(){Bookmark(BannerFour)  }); 
PSD['bannerbtn-'+ BannerFive].on("click", function(){Bookmark(BannerFive)  }); 
PSD['bannerdrop-'+ BannerFive].on("click", function(){Bookmark(BannerFive)  }); 

function Bookmark (viewnum) { 
item = PSD['item-'+ viewnum ] 
    bannerbtn = PSD['bannerbtn-'+ viewnum ] 
    bannerdrop = PSD['bannerdrop-'+ viewnum ] 

    var down; 
    var away; 
    var small; 

    if (bannerbtn.opacity == 1) { 
     away = 0; 
     small = .03; 
     down = -13; 
    }; 

    if (bannerbtn.opacity == 0) { 
     away = 1; 
     small = 1; 
     down = -200; 
    }; 

    //animations 
    bannerdrop.animate({ 
     properties:{y:down}, 
     curve:"spring(100,15,200)" 
    }); 

    bannerbtn.animate({ 
     properties:{opacity:away, scale:small}, 
     curve:"linear", 
     time:100 
    }); 



}; 

Answer 1

不太瞭解你的應用程序在這裏，但這裏的東西可能會設置您在正確的方向。

這絕對是不起作用，因爲我沒有很多的背景信息並作出假設：

var BannerCount = 5; 

var PSD = []; 

for (i = 0; i < count; i++) { 
    PSD[i] = {}; 
    PSD[i].btn = document.getElementById('bannerbtn-' + i); 

    PSD[i].btn.on("click", function (eevent) { 
     Bookmark(eevent.srcElement); 
    }); 

    PSD[i].y = -200; 
    PSD[i].on("click", function (eevent) { 
     Bookmark(eevent.srcElement); 
    }); 

    PSD[i].drop = document.getElementById('bannerdrop-' + i).addEventListener("click", 

    function (eevent) { 
     Bookmark(eevent.srcElement); 
    }); 
} 

function Bookmark(itemPSD) { 

    var down; 
    var away; 
    var small; 

    if (itemPSD.btn.style.opacity == 1) { 
     away = 0; 
     small = 0.03; 
     down = -13; 
    } else if (itemPSD.btn.style.opacity === 0) { 
     away = 1; 
     small = 1; 
     down = -200; 
    } 

    //animations 
    itemPSD.drop.animate({ 
     properties: { 
      y: down 
     }, 
     curve: "spring(100,15,200)" 
    }); 

    itemPSD.btn.animate({ 
     properties: { 
      opacity: away, 
      scale: small 
     }, 
     curve: "linear", 
     time: 100 
    }); 
} 

Answer 2

我們可能需要一個對象bannerdrop將保存所有屬性你有。因此，我們所做的是聲明此對象的數組，例如：

function bannerdrop(y){ 
     this.y = y; 
     this.on('click', function(){bookmark(this);}); 
    } 
    function bookmark(obj){ 
     var down; 
     var away; 
     var small; 

     //animations 
     obj.animate({ 
      properties:{y:down}, 
      curve:"spring(100,15,200)" 
     }); 
    } 
    var bannerArray = new Array(new bannerdrop(-200), new bannerdrop(-200), new bannerdrop(-200));