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

【问题标题】：Jquery getting specific array items and setting them as CSS stylesJquery 获取特定的数组项并将它们设置为 CSS 样式
【发布时间】：2015-07-04 13:49:11
【问题描述】：

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

$(':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>

【问题讨论】：

标签： jquery css arrays

【解决方案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

【讨论】：

【解决方案2】：

这应该可行。

$( "input" ).keyup(function() {
    change();
});
$('select').change(function(){
    change();
});


function change(){
  var style= "";
  $('.attr').each(function() {
   var inputvalue = $(this).val();
   var inputname = $(this).attr("name");
   style = style + inputname+":"+inputvalue+";";
  }); 
  $('.button').attr('style',style);
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input class="attr" type="text" value="1px" name="border-width">
<select class="attr" 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 class="attr" type="text" value="green" name="border-color">
    
<div class="button">1231</div>

【讨论】：

【解决方案3】：

我已将您的样式合并到一个对象中，然后将其传递给css 函数，为其提供所有样式。我还将您的下拉菜单默认为dotted，以便您可以看到它有效，但您可以将其更改为您喜欢的任何内容。

最后，如果您希望在每次更改值时更新样式，我建议将我的两个 cmets 之间的所有内容包装在此：

$(":input").on("change input", function(){
    //Insert below code
});

将您的代码更改为：

$(function(){
   //Begin core functionality
   var styles = {};
   $(':input').each(function() {
      styles[$(this).attr("name")] = $(this).val();   
   });
   $(".button").css(styles); 
   //End core functionality
 });

<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" selected="selected">Dotted</option>
  <option value="dash">Dashed</option>
</select>

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

【讨论】：

使用选择器 'input' 而不是 jquery 选择器 ':input' 可以获得性能提升，因为 :input 不是 css 规范的一部分。但这不是代码的问题。