Question

我有一些代码将后缀附加到输入。因此，用户可以更轻松地使用em与px。我遇到了一个小问题。

我使用数组包含属性并循环遍历它们以查看哪些字段需要后缀以及它们需要的后缀。这工作正常，直到我需要将属性“border-width”更改为px而不是em，但保持宽度为em。这有意义吗？

基本上，我需要在异常中包含border-width字段而不包括width。

我的jQuery看起来像这样

create_table "comments", force: true do |t|
    t.text    "coment"
    t.integer "user_id"
    t.integer "product_id"
  end
 create_table "products", force: true do |t|
    t.string  "name"
    t.float   "price"
    t.text    "review"
    t.string  "display"
    t.string  "processor"
    t.string  "ram_rom"
    t.string  "battery"
    t.string  "camera"
    t.string  "video"
    t.string  "image"
    t.integer "opsystem_id"
  end
create_table "users", force: true do |t|
    t.string   "email",                  default: "", null: false
    t.string   "encrypted_password",     default: "", null: false
    t.string   "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.integer  "sign_in_count",          default: 0,  null: false
    t.datetime "current_sign_in_at"
    t.datetime "last_sign_in_at"
    t.string   "current_sign_in_ip"
    t.string   "last_sign_in_ip"
    t.datetime "created_at"
    t.datetime "updated_at"
    t.integer  "plan_id"
    t.string   "stripe_customer_token"
    t.integer  "comment_id"
  end

这是我创建的包含html的jsFiddle。 https://jsfiddle.net/q3b0t8af/2/

我无法更改html，我使用name字段来调用特定字段。

Answer 1

为您做到这一点：

https://jsfiddle.net/q3b0t8af/3/

您所要做的就是使用一系列排除：

var valueArray = ["padding", "width", "Width", "height", "Height"];
var exceptionArray = ['kiosk_height','kiosk_width','border-width'];

$.each($("input"), function(i,v){
     if ($(v).attr('name') != undefined && $.inArray($(v).attr('name').trim(), exceptionArray) > -1) {
         $(v).on("focusout", function() {
             var value = $(this).val();
             if (value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && value.indexOf("%") <= 0 && $(this).val().length != 0) {
                 var newVal = value + 'px';
             }
             $(this).val(newVal).trigger('change');
         });
     } else {
         $(v).on("focusout", function() {
             var value = $(this).val();
             if (value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && value.indexOf("%") <= 0 && $(this).val().length != 0) {
                 var newVal = value + 'em';
                 $(this).val(newVal).trigger('change');
             }
         });
     }
});

Answer 2

您的“em”和“px”选择器是否更明确？然后这将工作（也清理了一些代码）。

var emArray = ["padding", "padding-left", "padding-right ", 
               "padding-bottom", "padding-top ", "width ", "height"];
var pxArray = ["border-width ", "kiosk_height", "kiosk_width"];

for (var i=0; i < emArray.length; i++)
    $("input[name='" + emArray[i] + "']").on("focusout", {unit:'em'}, dostuff);
for (var i=0; i < pxArray.length; i++)
    $("input[name='" + pxArray[i] + "']").on("focusout", {unit:'px'}, dostuff);

function dostuff(event) {
  var value = $(this).val();
  var unit = event.data.unit;

  if (value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && 
      value.indexOf("%") <= 0 && $(this).val().length != 0) {
    $(this).val(value + unit).trigger('change');
  }
}

包含循环中的特定属性

2 个答案: