Включая конкретное свойство в цикле

У меня есть немного кода, который добавляет суффиксы к входам. Таким образом, пользователям проще работать с em vs. 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 вокруг, я застрял, используя поле имени, чтобы вызывать определенные поля.

источник

2016-05-16 zazvorniki

Вы должны избегать использования '' functions' в пределах следующей итерации цикла, а также использование ''! == для сравнения –

@YosvelQuintero Тогда что будет лучшим способом для достижения этой цели? И те свойства, которые я хочу, равны px. Вы говорите, чтобы перевернуть мое заявление if? – zazvorniki

Не уверен, что именно вы хотите. Не могли бы вы предоставить нам больше информации, например, что вы хотите сделать и каков ваш ожидаемый результат? –

Сделано это для вас:

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

источник

2016-05-16 17:03:59

только его нужно Мне нужны только поля на странице, чтобы соответствовать тому, что находится в valueArray. У меня есть 100 свойств на странице, и это повлияет на подборщики цветов, флажки и поля, где они вводят слова. – zazvorniki

Замените '$ (" input ")' чем-то более полезным для вас, например '$ .each ([$ (" input [name * = 'padding'] "), $ (" input [name = 'width'] "), $ (" input [name = 'height'] "), $ (" input [name = 'border-width'] ")], function (i, v) {' –

Это создает ту же проблему, ширина границы и ширина не могут быть разными – zazvorniki

ли быть более явным с «эм» и «рх «Селекторы - опция? Тогда это сработает (также немного почистил код).

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

источник

2016-05-16 17:34:07 C14L

Включая конкретное свойство в цикле

ответ

Смежные вопросы