jQuery的自定义函数W/date.js

Question

我试图建立一个自定义date.js功能（与引导配对）将每个输入回应...

我的功能工作的第一个项目在系列字段如果我说$(".date-js").changeIt();，但只有第一个。

$.fn.changeIt = function() { 
    var input = "input#" + $(this).attr('id'); 
    input = $(input).data('val', $(input).val()); // save value 
    $(input).change(function() { // works when input will be blured and the value was changed 
     date = Date.parse(input.val()); 

     if (date !== null) { 
      input.removeClass(); 
      input.parent().removeClass("error success"); 
      input.parent().addClass("success"); 
      input.addClass("success"); 
     } else { 
      input.removeClass(); 
      input.parent().removeClass("error success"); 
      input.addClass("field_with_errors"); 
      input.parent().addClass("error"); 
     } 
    }); 

    $(input).keyup(function() { // works immediately when user press button inside of the input 
     if ($(input).val() != $(input).data('val')) { // check if value changed 
      $(input).data('val', $(input).val()); // save new value 
      $(this).change(); // simulate "change" event 
     } 
    }); 
} 

= form_for [@tool, @calibration] do |f| 
    #errors 
    .form-container 
    -if @tool.status == "In" 
     %p Enter time taken for calibration 
     .field.control-group 
     = f.label :ats_in 
     = f.text_field :ats_in, :class => "date-js" 
    -if @tool.status == "Out" 
     %p Enter time returned 
     .field.control-group 
     = f.label :cal_date 
     = f.text_field :cal_date, :class => "date-js" 
     .field.control-group 
     = f.label :cal_date_due 
     = f.text_field :cal_date_due, :class => "date-js" 
     .field.control-group 
     = f.label :ats_out 
     = f.text_field :ats_out, :class => "date-js" 
    .clear 
    = f.submit 'Save', :disable_with => "Saving..." 

Answer 1

将您的插件代码包装在return this.each(function() { });中，那么它将应用于所有匹配的元素。更新代码：

$.fn.changeIt = function() { 
    return this.each(function() { 
     var input = "input#" + $(this).attr('id'); 
     input = $(input).data('val', $(input).val()); // save value 
     $(input).change(function() { // works when input will be blured and the value was changed 
      date = Date.parse(input.val()); 
      if (date !== null) { 
       input.removeClass(); 
       input.parent().removeClass("error success"); 
       input.parent().addClass("success"); 
       input.addClass("success"); 
      } else { 
       input.removeClass(); 
       input.parent().removeClass("error success"); 
       input.addClass("field_with_errors"); 
       input.parent().addClass("error"); 
      } 
     }); 

     $(input).keyup(function() { // works immediately when user press button inside of the input 
      if ($(input).val() != $(input).data('val')) { // check if value changed 
       $(input).data('val', $(input).val()); // save new value 
       $(this).change(); // simulate "change" event 
      } 
     }); 
    }); 
}