Использовать функцию для многих элементов

Question

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

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

// First Example with ID 
$('#animal_image_file_0').bind('change', is_valid_dog_image_size); 

function is_valid_dog_image_size() { 
    $this = $('#animal_image_file_0'); 
    if($this[0].files[0].size < 3000000){ // valid 
    if ($this.closest(".form-group").hasClass("has-error")) 
     $this.closest(".form-group").removeClass("has-error"); 
     $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback").css("display", "none"); 
    return true 
    } else { // error 
    if (!$this.closest(".form-group").hasClass("has-error")) 
     $this.closest(".form-group").addClass("has-error"); 
     $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback ").css("display", "block"); 
    return false; 
    } 
    } 

Так я думал применить это ко многим полям файла я мог бы использовать класс вместо этого и затем огня функции с помощью .А («щелчка») метода, когда кнопка клонировать поле щелкает, но присвоение $ (this) в функции не будет работать, не так ли?

$('.add_nested_fields').on('click', function(){ 
    $('.animal_file').bind('change', is_valid_dog_image_size); 
}); 

function is_valid_dog_image_size() { 
    $this = $('.animal_file'); 
    if($this[0].files[0].size < 3000000){ // valid 
    if ($this.closest(".form-group").hasClass("has-error")) 
     $this.closest(".form-group").removeClass("has-error"); 
     $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback").css("display", "none"); 
    return true 
    } else { // error 
    if (!$this.closest(".form-group").hasClass("has-error")) 
     $this.closest(".form-group").addClass("has-error"); 
     $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback ").css("display", "block"); 
    return false; 
    } 
    } 

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

Благодаря

Answer 1

Основная проблема заключается в том, что вы будете присоединив несколько обработчиков для каждого поля:

$('.animal_file').bind 

является проблематичным, потому что вы хотите обрабатывать только события на новом поле (остальные обработчики остаться). Лучший способ для вашей ситуации - использовать обработчик делегата (версия JQuery 1.4.2+ и 1.7). Идея заключается в том, что вы присоедините обработчик событий на родительский элемент и фильтр для цели:

$('#parent-of-animal_file').on('change', '.animal-file', is_valid_dog_image_size); 

Затем в обработчике, просто использовать родной this и обернуть его в объект JQuery:

function is_valid_dog_image_size() { 
    $this = $(this); 
    ... 

Answer 2

Просто установите $this в JQuery обертку this. jQuery правильно устанавливает это для вас при запуске обратного вызова.

$('.add_nested_fields').on('click', function(){ 
    $('.animal_file').bind('change', is_valid_dog_image_size); 
}); 

function is_valid_dog_image_size() { 
    $this = $(this); 
    if(this.files[0].size < 3000000){ // valid 
    if ($this.closest(".form-group").hasClass("has-error")) 
     $this.closest(".form-group").removeClass("has-error"); 
     $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback").css("display", "none"); 
    return true 
    } else { // error 
    if (!$this.closest(".form-group").hasClass("has-error")) 
     $this.closest(".form-group").addClass("has-error"); 
     $this.siblings(".help-inline, .form-inline .has-feedback .form-control-feedback, .has-feedback ").css("display", "block"); 
    return false; 
    } 
    }