如何使用DOM元素的属性值作为变量?

时间:2019-01-14 22:05:30

标签: javascript jquery

从表单外部获得了一些分配给变量的动态值。我需要将它们传递给表单。现在,我可以像这样分别处理每个字段。

这将是表格

<form>
     <input type="text" class="inputfield widthfield" id="widthval" />
     <input type="text" class="inputfield fontsizefield" id="fontsize" />
</form>

这将是jQuery

widthval = '300px'
fontsize = '15px'
$(".widthfield").val(widthval);
$(".fontsizefield").val(fontsize);

,依此类推。但是这些领域有很多,而且看起来不对。因此,我想知道是否有任何方法可以使用字段ID来匹配字段和变量。 也许是这样的(逻辑)。

$(".inputfield").each(function(){
     matchattr = $(this).attr("id");
     $(this).val(matchattr);
});

在这种情况下,它使用属性的实际值。如何将该值转换为具有动态值的变量?

谢谢!

1 个答案:

答案 0 :(得分:-1)

鉴于您的变量与输入的ID匹配,则可以将值放在一个对象中,在键上循环,并在它们匹配时进行设置。

var data = {
  widthval: '300px',
  fontsize: '15px'
};

var $inputfields = $('.inputfield');

Object.keys(data).forEach(function(key){
  $inputfields.filter('#'+ key).val(data[key]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
     <input type="text" class="inputfield widthfield" id="widthval" />
     <input type="text" class="inputfield fontsizefield" id="fontsize" />
</form>