javascript - 如何最小化基于 jQuery 中选择器的代码

Question

jQuery 脚本代码:

$(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 标记:

 <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>

每当我尝试上传图像时，上面的代码都可以正常工作，它会检查验证和预览图像

但我想将我的代码最小化为只有一个更改函数和一个 showimagepreview 函数

请给我一个想法如何实现？

Answer 1

@Huangism 是正确的，这应该在codereview 上。但是，为了帮助:

$(function() {
    // combine binding selector in to one
   $('#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; // change to single "showimagepreview" function
        default : $('#errorimg').html("Invalid Photo"); break;
        }

    });

    function showimagepreview(input) {
        // grab "cu#" using the 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]);

        }
    }
});

1. 使用逗号分隔的选择器将您的绑定(bind)组合成一个
2. 删除重复的showimagepreview# 方法并统一到一个函数中
   • 将硬编码的 cu# ID 更改为基于原始输入 ID 的动态 ID。
   • 在选择器中引用该 ID。