javascript - 对 Javascript 很陌生。如何使此代码可扩展/更清洁？

<分区>

对于我正在开发的 Web 应用程序，我需要使用根据下拉选择菜单而变化的数据填充表列。我在下面有一个解决方案，它工作正常，但是因为我今天早上才真正开始学习 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]);
            });
        }       
    });
});

最佳答案

您可以使用对象。由于值以 1 递增，您可以使用所选元素的 index 动态生成值，html 方法与大多数jQuery 对象的方法接受回调函数。

回调的第一个参数是 jQuery 集合中选定元素的 index(selected elements)。该函数的返回值将被设置为元素的新 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 - 对 Javascript 很陌生。如何使此代码可扩展/更清洁？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16754329/

上一篇：javascript - JQuery Mobile Panel 小部件杀死页面

下一篇：javascript - jQuery OOP 元素参数

javascript - 动态创建的元素上的事件绑定(bind)？

javascript - 需要转到指定链接并同时执行 JavaScript

javascript - 当页脚滚动到 View 中时如何向上推送固定侧边栏-请不要使用第 3 方库

javascript - Jquery遍历iframe中的html元素

PHP:允许用户更改背景颜色不起作用？

javascript - 如何用换行符 "\n"替换 HTML <br>？

javascript - 在用户关闭选项卡/窗口之前执行某些操作

javascript - knockoutjs 自定义元素(组件)，viewmodel 属性未定义

javascript - 一天中特定时间的颜色变化在 Js 中不起作用