Jquery 获取特定的数组项并将它们设置为 CSS 样式

Question

我一直在尝试使用输入字段的名称和值来设置按钮的样式但无济于事，它似乎只返回最后一个值，然后返回值的一个字母。

$(':input').each(function() {
   var inputvalue = $(this).val(); 
   var inputname = $(this).attr("name");
   // alert(inputvalue)
   // alert(inputname)
   $(".button").attr("style" , inputname[0] + ":" + inputvalue[0] + ";" + inputname[1] + ":" +  inputvalue[1]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="text" value="1px" name="border-width">
<select name="border-style">
  <option value="none">None</option>
  <option value="solid">Solid</option>
  <option value="dotted">Dotted</option>
  <option value="dash">Dashed</option>
</select>

<input type="text" value="green" name="border-color">
    
<div class="button"></div>

Answer 1

您的代码中有很多地方需要修复。

• 样式属性在 DOM 上采用驼峰命名法。您必须将 border-width 更改为 borderWidth，其余部分相同
• 您必须执行您的逻辑以在 change 事件处理程序上设置样式，否则它永远不会被执行
• 您的每个逻辑都无法按原样运行，我已在我的示例中修复了它。

这里有一个工作示例

HTML

<input type="text" value="1px" name="borderWidth">
<select name="borderStyle">
  <option value="none">None</option>
  <option value="solid">Solid</option>
  <option value="dotted">Dotted</option>
  <option value="dash">Dashed</option>
</select>

<input type="text" value="green" name="borderColor">

<div class="button">test</div>

Javascript

$(':input').change(function() {
    var style = {}
    $(':input').each(function() {
       var inputvalue = $(this).val(); 
       var inputname = $(this).attr("name");
       style[inputname] = inputvalue; 
    });

    $(".button").css(style); 
});

DEMO