Question

我有一个函数可以验证附件的文件大小，并在文件大小超过限制集时添加错误，但它仅限于具有id的特定文件字段，我希望能够在许多文件字段上使用该功能。

如果用户想要添加两个图像，那么他们可以单击按钮来克隆文件字段。

// 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;
   }
  }

所以我想把它应用到许多文件字段中我可以使用类，然后在单击克隆字段的按钮时使用.on（＆＃39; click＆＃39;）方法触发该函数，但是在函数中分配$（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

只需将$this设置为this的jQuery包装器即可。运行事件回调时，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;
   }
  }

Answer 2

主要问题是您将为每个字段附加多个处理程序：

$('.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);
  ...

在许多元素上使用函数

2 个答案: