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

Answer 2

$$('[id^=ajax_step]').on('submitted', function(e) {
    mainView.router.loadPage('transfer'+this.id.slice(9));
});

'[id^=ajax_step]'选择ID以＆＃34; ajax_step＆＃34;开头的所有元素。

循环以避免重复代码

2 个答案: