0

各入力に応答する (ブートストラップとペアになっている) カスタムの 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..."
4

1 に答える 1

0

プラグイン コードをラップする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
            }
        });
    });
}
于 2013-07-09T19:00:00.290 に答える