Question

我有一个包含大约40个不同字段（选择，无线电，输入等）的表单，这些字段包含要作为CSS属性应用的值（例如：颜色的文本输入字段将采用十六进制代码）

我已经有一个工作版本，它使用每个字段的id并将其附加到变量，然后我将变量传递给我想要在keyup上更改的元素的CSS属性，如下所示。

// code from tutorial / example
$('#external-events .fc-event').each(function() {

    // store data so the calendar knows to render an event upon drop
    $(this).data('event', { // HERE: overwrites the data object ==>
        title: $.trim($(this).text()), // use the element's text as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)
    });

    // make the event draggable using jQuery UI
    $(this).draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });

});

我的问题是，获取所有表单项值的最有效方法是什么，请记住它们的顺序和数量将来可能会发生变化。我也无法改变标记来添加数据属性。

只是手动定位所有40个属性吗？

Answer 1

有几种方法可以做到这一点......以下是：

您可以在ID及其对应的元素和属性之间创建地图：

var idMap = {
  'id_bgcolor': {
    'element': 'h2',
    'property': 'background-color'
  },
  'id_margin_btm': {
    'element': 'div',
    'property': 'margin-bottom'
  },
};

然后，您可以遍历地图，获取值并将它们设置为几个循环：

var inputIds = Object.keys(idMap);
var elements = {};
for (var i = 0, z = inputIds.length; i < z; i++) {
  var $input = $('#' + inputIds[i]);
  var value = $input.val();
  var mapping = idMap[inputIds[i]];
  var element = elements[mapping.element] || {};
  var property = mapping.property;
  element[property] = value;
  elements[mapping.element] = element;
}
var elementNames = Object.keys(elements);
for (var e = 0, z = elementNames.length; e < z; e++) {
  $(elementNames[e]]).css(elements[elementNames[e]]);
}

如果你可以添加data-属性（我感到非常懊恼，你可以＆＃t}），这是另一个属性：

将CSS属性的名称添加为元素的data-属性。例如：

<input class="style" data-element="div" data-attribute="margin-bottom" type="text">
<input class="style" data-element="h2" data-attribute="background-color" type="text">

然后在elementStyles：

$('.style').each(function (item) {
    var $item = $(item);
    $($item.data('element')).css($item.data('attribute'), $item.val());
});

这样，您只需定义一次。您最终会拨打.css()的电话，但这些电话通常足够快。如果你发现它变慢了，你可以编译一个特定元素的所有属性la：

var elements = {};
$('.style').each(function (item) {
    var $item = $(item);
    var element = elements[$item.data('element')] || {};
    element[$item.data('attribute')] = $item.val();
});
var elementNames = Object.keys(elements);
for (var e = 0, z = elementNames.length; e < z; e++) {
    $(elementNames[e]]).css(elements[elementNames[e]]);
}

您正在构建要在.css()中设置的对象，然后立即执行这些操作。

jQuery从多个字段设置CSS属性

1 个答案: