javascript - 循环避免重复代码

Question

myApp.onPageInit("page", function(page) {
    $$('#ajax_step1').on('submitted', function(e) {
        mainView.router.loadPage('transfer1');
    });

    $$('#ajax_step2').on('submitted', function(e) {
        mainView.router.loadPage('transfer2');
    });
    ...
});

函数内的代码看起来非常重复。我怎样才能以更聪明的方式做同样的事情？

我尝试了类似的方法，但无法按预期工作。

for (var i = 0; i < 6; i++) {
    $$('#ajax_step'+i).on('submitted', function(e) {
        mainView.router.loadPage('transfer'+i);
    });
}

Answer 1

更好的方法是使用通用类以及包含与特定元素实例相关的元数据的 data 属性。尝试这样的事情:

<div class="ajax_step" data-transfer="transfer1"></div>

myApp.onPageInit("page", function(page) {
    $$('.ajax_step').on('submitted', function(e) {
        mainView.router.loadPage($(this).data('transfer'));
    });
});