JQuery con ID parametrizzati

[two_socks]

Salve,
volevo sapere se é possibile richiamare una funzione jquery parametrizzando l'id a cui é collegato l'evento.

Cioé la mia pagina ha diversi form html che differiscono esclusivamente per l'id progressivo (1, 2, etc..) e funzioni jquery tutte uguali che vengono richiamate a seconda di quale form ha subito l'evento change.

Dato che appunto la funzione jquery é uguale per tutti, é possibile avere una sola funzione che opera sul form che ha scaturito l'evento?

FORMS

<div id='preview_1'></div>
<form id="imageform_1" method="post" enctype="multipart/form-data" action='/uploadphoto/ajaximage/'>
Upload image: 
<div id='imageloadstatus_1' style='display:none'>
<img src="/resources/img/loader.gif" alt="Uploading"/>
</div>

<div id='imageloadbutton'>
<input type="file" name="photoimg" id="photoimg_1" />
</div>
</form>

<div id='preview_2'></div>
<form id="imageform_2" method="post" enctype="multipart/form-data" action='/uploadphoto/ajaximage/'>
Upload image: 
<div id='imageloadstatus_2' style='display:none'>
<img src="/resources/img/loader.gif" alt="Uploading"/>
</div>

<div id='imageloadbutton'>
<input type="file" name="photoimg" id="photoimg_2" />
</div>
</form>

FUNZIONI

$('body').on('change','#photoimg_1', function(){
var A=$("#imageloadstatus_1");
var B=$("#imageloadbutton_1");

$("#imageform_1").ajaxForm({target: '#preview_1',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

$('body').on('change','#photoimg_2', function(){
var A=$("#imageloadstatus_2");
var B=$("#imageloadbutton_2");

$("#imageform_2").ajaxForm({target: '#preview_2',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

[cavicchiandrea]

La soluzione più semplice e scrivere l'evento (in questo caso onchange) in linea così

<divid='preview_2'></div><formid="imageform_2"method="post"enctype="multipart/form-data"action='/uploadphoto/ajaximage/'>
Upload image: 
<divid='imageloadstatus_2'style='display:none'>
<imgsrc="/resources/img/loader.gif"alt="Uploading"/>
</div>

<divid='imageloadbutton'>
<inputtype="file"name="photoimg"id="photoimg_2" onchange="UploadAjax(2)"/>
</div>
</form>

E inserisci una funzione dinamica

function UploadAjax(element){var A=$("#imageloadstatus_"+element);
var B=$("#imageloadbutton_"+element);

$("#imageform_"+element).ajaxForm({target:'#preview_'+element,
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
}}).submit();
}

Si potrebbe associare l'evento da ready ma è più complesso.



P.S. Sicuro che quello che questo multi-file-upload non faccia al caso tuo?