Петля, чтобы избежать повторяющегося кода

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

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

'[id^=ajax_step]' выбирает все элементы, идентификатор начинается с "ajax_step".

Answer 2

Лучшим подходом является использование общих классов наряду с атрибутами 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')); 
    }); 
});