簡化我的JavaScript與函數

我有一系列選擇列表中，我使用，以用IDS文本框。所以你點擊一個選擇選項，另一個文本框被填入其ID。簡化我的JavaScript與函數

只有一個選擇/ ID對這工作正常，但我有倍數，唯一的變化是選擇和輸入的ID ..實際上只是結局的變化，輸入都始於featredproductid和選擇標識全部從配方產品開始，然後以類別結束。

我知道，一遍又一遍上市這爲每個類別是不這樣做的方式。我想我需要使類別 VAR貓= [「橄欖油」，「顆粒」，「意大利麪」] ，然後使用foreach函數的陣列？也許？

這裏是笨重的代碼

window.addEvent('domready', function() { 
    $('recipesproductoliveoil').addEvent('change', function(e){ 
     pidselected = this.options[this.selectedIndex].getProperty('value') ; 
    $("featuredproductidoliveoil").setProperties({ 
     value: pidselected}); ; 
    }); 
     $('recipesproductgrains').addEvent('change', function(e){ 
      pidselected = this.options[this.selectedIndex].getProperty('value') ; 
     $("featuredproductidgrains").setProperties({ 
      value: pidselected}); ; 
     }); 
     $('recipesproductpasta').addEvent('change', function(e){ 
      pidselected = this.options[this.selectedIndex].getProperty('value') ; 
     $("featuredproductidpasta").setProperties({ 
      value: pidselected}); ; 
     }); 
    $('recipesproductpantry').addEvent('change', function(e){ 
     pidselected = this.options[this.selectedIndex].getProperty('value') ; 
    $("featuredproductidpantry").setProperties({ 
     value: pidselected}); ; 
    }); 

});

記住這是MooTools的1.1（不，我不能更新抱歉）。我相信這是一種基本的東西，我似乎已經把我的大腦包裹起來了。但我確信這樣做如上是不是真的好...

來源

2010-05-05 liz

JS支持高階函數（採用函數和返回函數）。請注意，答案都遵循一種常見模式：將函數的一部分分解爲不同的變量，將其變爲高階函數的參數。 – outis 2010-05-06 01:19:20

你應該聲明'pidselected'是本地的（'var pidselected'在監聽器中），所以你不使用全局變量並且污染全局名字空間。 – outis 2010-05-06 01:19:46

你靠近。這是你如何做到這一點：

var cats = ['oliveoil', 'grains', 'pasta']; 
for (i in cats) { 
    addChangeFunction(cats[i]); 
} 

function addChangeFunction(name) { 
    $('recipesproduct' + name).addEvent('change', function(e) { 
     pidselected = this.options[this.selectedIndex].getProperty('value'); 
     $('featuredproductid' + name).setProperties({ 
      value: pidselected 
     }); 
    }); 
}

來源

2010-05-06 00:59:20 BalusC

爲什麼限制基於ID？更多的語義方法是通過選擇器去處理數組，像'var addChangeEvent（elements）{elements.each（function（el）{el.addEvent（...）'，或者add class = 「food」給他們或去addChangeEvent（$（「formid」）。getElements（「select」））;在1.2中，你可以直接在選擇器a'la'$（「formid」）上應用事件。。.getElements（「選擇」）的addEvent（）'' – 2010-05-06 14:57:59

@Dimitar：確實有更多的方式來羅馬這一次僅僅是最短隨意張貼自己的方式回答 – BalusC 2010-05-06 15:00:57

感謝，這正是我。。意思所以在這個貓[i]是傳遞給函數的名稱權 – liz 2010-05-06 15:09:30

像這樣的東西可能會有所幫助：

function bindSelectFeature(select, featured) { 
    $(select).addEvent('change', function(e){ 
     pidselected = this.options[this.selectedIndex].getProperty('value') ; 
     $(featured).setProperties({ 
      value: pidselected 
     }); 
    }); 
    }); 
    bindSelectFeature('recipesproductpasta','featuredproductidpasta');

來源

2010-05-06 00:58:35 gnarf

簡化我的JavaScript與函數

回答

相關問題