Question

我正在尝试构建一个自定义的date.js函数（与bootstrap配对）将响应每个输入......

如果我说$(".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
            }
        });
    });
}

jQuery自定义函数w / date.js

1 个答案: