Как динамически определять и вызывать функции jQuery

0

Благодаря этому вопросу я узнал, как я могу динамически создавать элементы HTML на основе выбранного пользователем параметра.

Теперь, когда пользователи выбирают вариант, скажем, 5, создаются и отображаются пять групп полей ввода.

Для каждой группы полей ввода существует кнопка загрузки файлов для изображений.

У меня есть функция javascript, которая обнаруживает, когда пользователи загружают изображение, а затем отображает миниатюру этого изображения.

Проблема в том, что мне нужно получить доступ к идентификатору каждого <input type="file" id="appraisal_image1">

Я мог бы, конечно, создать несколько определений функций, каждый с разными идентификаторами, а затем вызвать каждую из этих функций, но мне было интересно, выполнил ли это это без копирования и вставки большого количества кода.

Я прикрепил jsFiddle, который правильно отображает миниатюры первого и второго изображений, но не последующих, поскольку нет функций, определенных или вызванных для остальных.

Теги:
loops
dynamic

3 ответа

2
Лучший ответ

Вместо использования ids используйте классы и используйте делегирование событий для регистрации обработчика изменений

В приведенном ниже примере добавляются дополнительные классы appraisal_image к элементу управления входными файлами, где при добавлении класса thumbnail_image в элемент изображения

Пытаться

// Show Thumbnail
function getThumbnail (input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(input).closest('.image-ct').find('.thumbnail_image').attr('src', e.target.result).show();
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$('#Number').change(function() {
    var num = parseInt($(this).val(), 10);
    var container = $('<div />');
    for(var i = 1; i <= num; i++) {
        container.append('<div class="image-ct ' + i + '"><div class="row"><div class="col-md-6 col-md-offset-3 bottom-15"><label for="file" class="text-center" id="imageNumber' + i + '">Upload Image:</label><input class="light-gray center appraisal_image" type="file" name="appraisal_image' + i + '" id="appraisal_image' + i + '"><br><div class="image-holder"><img class="hide-till-uploaded center thumbnail_image" id="thumbnail_image' + i + '" src="#" alt="your image" /></div></div></div><div class="row"><div class="col-md-2 col-md-offset-5 bottom-15"><label for="Size" id="Size' + i + '">Size</label><input type="text" class="form-control" name="Size' + i + '" placeholder="Rug Size" id="Size' + i + '"></div></div></div>');
    }

    $('#here').empty().append(container);
});
$('#here').on('change', '.appraisal_image', function(){
    getThumbnail(this);
})

Демо: скрипка

Поделиться
  • 0
    Вау, мне придется потратить некоторое время, чтобы разобраться, как именно это работает, но я поражен! Я начинал думать, что мне придется копировать и вставлять много кода. Спасибо за вашу помощь!
  • 0
    Есть ли способ, чтобы анонимная функция вызывалась при загрузке страницы в дополнение к изменению. Таким образом, будет создано как минимум одно поле ввода.
Показать ещё 2 комментария
0

Вы можете использовать этот код для получения всех идентификаторов типа ввода, которые существуют в вашей форме

[].forEach.call(document.querySelectorAll("input[type='text']"),
           function (input) {
               var value = input.value;
               var id = input.id;
               alert(id);
           });
Поделиться
0

Используйте классы вместо ids, а затем вы можете использовать jQuery on делегата:

$(".appraisal_image")  // get all elements with this class
   .on("change", function(){
       getThumbnail1(this);
       $(this).css("display", "block");
   });

on добавит события к элементам, которые еще не существуют. Это означает, что элементам, которые динамически добавляются, автоматически присваивается событие

about: jquery on

Поделиться
  • 0
    По какой-то причине я не могу заставить это работать!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню