對JavaScript很新穎。我怎樣才能使這個代碼可擴展/清潔？

對於我正在開發的Web應用程序，我需要填充表格列，其數據根據下拉選擇菜單進行更改。我在下面有一個解決方案，它可以正常工作，但是因爲我今天早上才真正開始學習JavaScript/JQuery，所以我相信它不是一個很好的解決方案。當我開始使用較大的表格或有大量下拉字段時，它會變得雜亂無章。有什麼辦法可以做得更好嗎？對JavaScript很新穎。我怎樣才能使這個代碼可擴展/清潔？

感謝，

馬克

var GBP = new Array(); 
GBP[0] = "£1"; 
GBP[1] = "£2"; 
GBP[2] = "£3"; 
GBP[3] = "£4"; 
GBP[4] = "£5"; 
GBP[5] = "£6"; 
GBP[6] = "£7"; 

var EUR = new Array(); 
EUR[0] = "€1"; 
EUR[1] = "€2"; 
EUR[2] = "€3"; 
EUR[3] = "€4"; 
EUR[4] = "€5"; 
EUR[5] = "€6"; 
EUR[6] = "€7"; 

var USD = new Array(); 
USD[0] = "$1"; 
USD[1] = "$2"; 
USD[2] = "$3"; 
USD[3] = "$4"; 
USD[4] = "$5"; 
USD[5] = "$6"; 
USD[6] = "$7"; 

$(document).ready(function() { 

    //populate currency column with default values (GBP) 
    $('#prices tr').each(function(i) { 
      $(this).find('.currency').html(GBP[i]); 
    }); 

    //populate the currency column with a value dependent 
    //on the selector dropdown 
    $('.currency-select').change(function() { 
     if($(this).val() == "GBP"){ 
      $('#prices tr').each(function(i) { 
       $(this).find('.currency').html(GBP[i]); 
      }); 
     } 

     if($(this).val() == "EUR"){ 
      $('#prices tr').each(function(i) { 
       $(this).find('.currency').html(EUR[i]); 
      }); 
     } 

     if($(this).val() == "USD"){ 
      $('#prices tr').each(function(i) { 
       $(this).find('.currency').html(USD[i]); 
      }); 
     }  
    }); 
});

來源

2013-05-25 Mark Williams

更適合http://codereview.stackexchange.com –

阿。謝謝Ant P.我不知道codereview.stackexchange.com。這確實更適合那裏。 –

我想指出，如果你只是學習JavaScript，你絕對不應該使用jQuery。你應該首先學習基本和無限靈活的[Vanilla JS]（http://vanilla-js.com/），然後在你真正感覺你需要時使用jQuery（提示：你不需要） –

您可以使用一個對象。由於值增加了1，因此可以使用所選元素的index動態生成值，html方法（如大多數jQuery對象的方法接受回調函數）。

回調的第一個參數是jQuery集合中選定元素的index（選定元素）。該函數的重定值將被設置爲元素的新html內容。

var cur = { 
    GBP: '£', 
    EUR: '€', 
    USD: '$' 
} 

$(document).ready(function() { 
    $('.currency-select').change(function() { 
     // Getting symbol based on the current value 
     var c = cur[this.value]; 
     $('#prices tr').find('.currency').html(function(i) { 
      return c + (i+1); 
     }); 
    }).change(); // trigger the change event once on DOM ready 
});

編輯：在該值不是由1遞增的情況下：

var cur = { 
    GBP: '£', 
    EUR: '€', 
    USD: '$', 
    values: ['3', '4', '0', '9', '...'] 
} 

$('#prices tr').find('.currency').html(function(i) { 
    return c + cur.values[i]; 
});

Demo on jsFiddle.net

來源

2013-05-25 22:12:19 undefined

嗨，謝謝so很多回應。真的很感謝幫助。在實現代碼時遇到一些麻煩。位混淆爲什麼函數（i）{return c +（i + 1）;}）;是在做。此外，這些值只是我爲示例選擇的任意值。在我的真實表格中，它們不會像那樣增加。 –

@MarkWilliams不用客氣，'c'是符號，'i'是索引，1,2,3 ......。我已經更新了答案，如果所有貨幣的價值都相同，則可以使用_an_數組。我已經更新了答案。 – undefined

謝謝。發揮魅力。不得不稍微修改你的代碼來解釋不同貨幣的不同值。感謝您的幫助:) –

對JavaScript很新穎。我怎樣才能使這個代碼可擴展/清潔？

回答

相關問題