Question

对于我正在开发的webapp，我需要使用根据下拉选择菜单更改的数据填充表列。我在下面有一个解决方案，它工作正常，但是因为我今天早上才开始学习javascript / JQuery，我相信它不是一个非常好的。当我开始使用较大的表格或有大量的下拉字段时，它会变得混乱。有什么方法可以做得更好吗？

谢谢，

标记

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]);
            });
        }       
    });
});

Answer 1

您可以使用对象。由于值增加了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

非常新的Javascript。如何使此代码可扩展/更清洁？

1 个答案: