在循环中包含特定属性

Including specific property in loop

本文关键字：属性 包含特 循环      更新时间：2023-09-26

我有一段代码，可以在输入中添加后缀。因此，用户使用em比使用px更容易。不过我遇到了一个小问题。

我将属性包含在一个数组中，并在它们之间循环，以查看哪些字段需要后缀以及它们需要什么后缀。这一直很好，直到我需要将属性"border-width"更改为px而不是em，但保持宽度em。这有道理吗？

基本上，我需要在不包括宽度的情况下，将边界宽度字段包括在我的异常中。

我的jQuery看起来像这个

 var valueArray = ["padding", "width", "Width", "height", "Height"];
for(var i = 0, ii = valueArray.length; i < ii; i++){
    if ($("input[name*='" + valueArray[i] + "']").attr('name') === 'kiosk_height' || $("input[name*='" + valueArray[i] + "']").attr('name') === 'kiosk_width' || $("input[name*='" + valueArray[i] + "']").attr('name') === 'border-width'){
        $("input[name*='" + valueArray[i] + "']").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{
        $("input[name*='" + valueArray[i] + "']").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');
            }
        });
    }
}

这是我创建的jsFiddle，其中包括html。https://jsfiddle.net/q3b0t8af/2/

我无法更改html，我一直在使用名称字段来调用特定的字段。

为您制作：

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');
             }
         });
     }
});

是否可以选择更明确地使用"em"answers"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');
  }
}
相关文章：