jQuery 从多个字段设置 CSS 属性

Question

我有一个包含大约 40 个不同字段(选择、 radio 、输入等)的表单，这些字段包含将作为 CSS 属性应用的值(例如:颜色的文本输入字段将采用十六进制代码) .

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

function elementStyles(){
    var bgcolor = $("input#id_bgcolor").val();
    var color = $("input#id_textcolor").val();
    var marginbottom = $("input#id_margin_btm").val();
    var borderradius = $("input#id_border_rad").val();

    $("h2").css({
        "background-color": bgcolor,
        "color": color
    });

    $("div").css({
        "margin-bottom": marginbottom,
        "border-radius": borderradius
    });
}

$("input, select").on("change keyup, function(){
     elementStyles();
});

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

是否只是手动定位所有 40 个属性的情况？

Answer 1

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

您可以在 ID 与其对应的元素和属性之间创建一个映射:

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

然后，您可以遍历 map ，获取值并在几个循环中设置它们:

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- 属性(我很懊恼地看到你不能):

将 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() 进行更多调用，但这些调用通常足够快。如果你发现它变慢了，你可以编译一个特定元素的所有属性，比如:

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() 中设置的对象，然后一次完成所有操作。