javascript - How to minimize code based on selector in jQuery -

javascript - How to minimize code based on selector in jQuery -

jquery script code:

$(function() { $('#html_btn1').change(function(){ var val = $(this).val(); switch(val.substring(val.lastindexof('.')+1).tolowercase()){ case 'jpg' : case 'png' : case 'gif' : case 'jpeg' : showimagepreview1(this); break; default : $('#errorimg').html("invalid photo"); break; } }); $('#html_btn2').change(function(){ var val = $(this).val(); switch(val.substring(val.lastindexof('.')+1).tolowercase()){ case 'jpg' : case 'png' : case 'gif' : case 'jpeg' : showimagepreview2(this); break; default : $('#errorimg').html("invalid photo"); break; } }); $('#html_btn3').change(function(){ var val = $(this).val(); switch(val.substring(val.lastindexof('.')+1).tolowercase()){ case 'jpg' : case 'png' : case 'gif' : case 'jpeg' : showimagepreview3(this); break; default : $('#errorimg').html("invalid photo"); break; } }); function showimagepreview1(input) { if (input.files && input.files[0]) { var filerdr = new filereader(); filerdr.onload = function(e) { $('#cu1').attr('src', e.target.result); }; filerdr.readasdataurl(input.files[0]); } } function showimagepreview2(input) { if (input.files && input.files[0]) { var filerdr = new filereader(); filerdr.onload = function(e) { $('#cu2').attr('src', e.target.result); }; filerdr.readasdataurl(input.files[0]); } } function showimagepreview3(input) { if (input.files && input.files[0]) { var filerdr = new filereader(); filerdr.onload = function(e) { $('#cu3').attr('src', e.target.result); }; filerdr.readasdataurl(input.files[0]); } } });

html markup:

<div class="form-group"> <img id="cu1" src="upload-photo-img.jpg"/> <input type="file" path="images" id="html_btn1" /> <img id="cu2" src="upload-photo-img.jpg"/> <input type="file" path="images" id="html_btn2" /> <img id="cu3" src="upload-photo-img.jpg"/> <input type="file" path="images" id="html_btn3" /> </div>

above code works fine whenever trying upload image checks validate , preview image

but want minimize code 1 alter function , 1 showimagepreview function

please give me thought how achieve?

@huangism correct, should on codereview. but, sake of helping:

$(function() { // combine binding selector in 1 $('#html_btn1,#html_btn2,#html_btn3').change(function(){ var val = $(this).val(); switch(val.substring(val.lastindexof('.')+1).tolowercase()){ case 'jpg' : case 'png' : case 'gif' : case 'jpeg' : showimagepreview(this); break; // alter single "showimagepreview" function default : $('#errorimg').html("invalid photo"); break; } }); function showimagepreview(input) { // grab "cu#" using original element's id var cu_id = '#cu' + input.id.match(/\d+$/)[0]; /* alt: var cu_id = input.id.replace('html_btn','#cu'); */ if (input.files && input.files[0]) { var filerdr = new filereader(); filerdr.onload = function(e) { // reference id here $(cu_id).attr('src', e.target.result); }; filerdr.readasdataurl(input.files[0]); } } }); combine bindings in 1 using comma-separated selector remove duplicated showimagepreview# methods , unify 1 function change hard-coded cu# ids in dynamic id based on original input's id. reference id in selector.

javascript jquery html