Javascript идентификаторы в переменные onchange

Question

Моя HTML-форма работает отлично, а javascript работает отлично ... Единственная проблема в том, что я, очевидно, не хочу повторять код 15 раз, поэтому мне нужно, чтобы идентификаторы были извлечены в переменные.

Простопытаясь получить три идентификатора из любой формы, представленной на обмен.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 - идентификаторы, которые я ищу, выделены **

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

Множество способов сделать это.

$("#my_input_id1, #my_input_id2, #my_input_id3").on("change",function(){
   var inputItem = $(this);  
   readURL(inputItem);
});

Вы также можете создавать переменные. Например:

<input type="file" class="inputItem" data-img="my_img_id1" data-btn="my_btn_id1">
<input type="file" class="inputItem" data-img="my_img_id2" data-btn="my_btn_id2">
<input type="file" class="inputItem" data-img="my_img_id3" data-btn="my_btn_id2">

Затем с помощью jQuery

$(".inputItem").on("change",function(){
     var imgid = $(this).attr("data-img");
     var btnid = $(this).attr("data-btn");

     // then you can create dynamic selectors
     // ...

     $("#"+imgid).attr('src', e.target.result);
     $("#"+btnid).show();

});

Надеюсь, это поможет или направит вас в правильном направлении!

Answer 2

$(this.form) вернет форму, содержащую элемент ввода, на котором было инициировано событие. Затем вы можете использовать это, чтобы найти другие элементы, которые вы хотите.

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

Нет необходимости получать их идентификаторы, вы можете просто использовать сами объекты 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);
});