Javascript ID 转换为变量 onchange

Question

我的 html 表单工作完美，javascript 工作完美...唯一的问题是我显然不想重复代码 15 次，所以我需要将 id 放入变量中。

简单地尝试从更改时提交的表单中获取三个 id。 my_btn_id、my_img_id、my_input_id。就是这样。我已经尝试了数千种可能的语法变化，在这里查找了数百个答案，但没有任何东西不能按照我需要的方式工作。我显然错过了一些东西。感谢所有帮助。

这是简化的 html 表单:

<form action="#” method=" post " id=”my_form_id”>
    <input type="file " id="my_input_id "><br>
    <button type="submit " value="Upload " id="my_btn_id ">Upload</button>
</form> 

这是 javascript - 我正在寻找的 id 用 ** 突出显示

$(document).on('change', '.btn-file :file', function () {
    var input = $(this),
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [label]);
});

$('.btn-file :file').on('fileselect', function (event, label) {
    var input = $(this).parents('.input-group').find(':text'),
        log = label;
    if (input.length) {
        input.val(log);
    } else {
        if (log) alert(log);
    }
});

function readURL(input) {
    **var imgid = "#my_img_id";**
    **var btnid = "#my_btn_id";**

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(imgid).attr('src', e.target.result);
            $(btnid).show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

**var inputid = "#my_input_id";**

$(inputid).change(function () {
    readURL(this);
}); 

Answer 1

$(this.form) 将返回包含触发事件的输入元素的表单。然后您可以使用它来查找您想要的其他元素。

var form = $(input.form);
var img = form.next("img");
var btn = form.find("input:submit");

无需获取它们的 ID，您只需使用 jQuery 对象本身即可。例如

img.attr("src", e.target.result);
btn.show();

完整代码:

function readURL(input) {
    var form = $(input.form);
    var img = form.next("img");
    var btn = form.find("input:submit");    

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            img.attr('src', e.target.result);
            btn.show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("input[type=file]").change(function() {
    readURL(this);
});